图片滚动效果实现说明

最近也是一直想不通图片滚动效果的实现思路，怎么实现图片的滚动的，今天在看到一个网站的滚动效果时，顺手点开了F12，看到最外层一个DIV的样式，过去的不明白一下子全了解了。

首先是图片的列表，我这边脚本如下：

   1:   

   2:    <ul class="ul_s">

   3:      <li class="li_s active"><a href="#"><img src="image/imgScroll/1.gif" class="img_s" /></a></li>

   4:      <li class="li_s" style="top:300px;"><a href="#"><img src="image/imgScroll/2.gif" class="img_s" /></a></li>

   5:      <li class="li_s" style="top:600px;"><a href="#"><img src="image/imgScroll/3.gif" class="img_s" /></a></li>

   6:      <li class="li_s" style="top:900px;"><a href="#"><img src="image/imgScroll/4.gif" class="img_s" /></a></li>

   7:      <li class="li_s" style="top:1200px;"><a href="#"><img src="image/imgScroll/5.gif" class="img_s" /></a></li>

   8:      <li class="li_s" style="top:1500px;"><a href="#"><img src="image/imgScroll/6.gif" class="img_s" /></a></li>

   9:    </ul>

对应CSS如下

   1:  .ul_s {

   2:      list-style: none;

   3:      width: auto;

   4:      margin: 0px;

   5:      padding: 0px;

   6:      position: absolute;

   7:      left:0px;

   8:  }

   9:  .li_s {

  10:      margin: 0px;

  11:      padding: 0px;

  12:      float: left;

  13:      list-style-type: none;

  14:      position:absolute;

  15:  }

  16:  .img_s {

  17:      border: none;

  18:  }

然后在外层包裹一个div，玄机就在div上，在设置了div的高度和宽度以后，还需要设置一个属性，如下：

   1:  .div_s {

   2:      height: 300px;

   3:      width: 1000px;

   4:      overflow:hidden;

   5:      position:relative;

   6:  }

这样，整个ul标记就只有div的部分能看到了，然后添加添加对应按钮的js事件

   1:  $(function(){

   2:      $("#btnPrev").click(function(){prev();});

   3:      $("#btnNext").click(function(){next();});

   4:      });

   5:   

   6:  function next()

   7:  {

   8:      var activeindex=$(".active").index();

   9:      activeindex=activeindex+1;

  10:      if(activeindex>$(".ul_s").children().length-1)

  11:      {

  12:          activeindex=0;

  13:          }

  14:      $(".active").removeClass("active");

  15:      $(".ul_s").children().eq(activeindex).addClass("active");

  16:      var leftpx=activeindex*300;

  17:      $(".ul_s").stop().animate({top:"-"+leftpx+"px"},1000);

  18:      }

  19:   

  20:  function prev()

  21:  {

  22:      var activeindex=$(".active").index();

  23:      activeindex=activeindex-1;

  24:      if(activeindex<0)

  25:      {

  26:          activeindex=$(".ul_s").children().length-1;

  27:          }

  28:      $(".active").removeClass("active");

  29:      $(".ul_s").children().eq(activeindex).addClass("active");

  30:      var leftpx=activeindex*300;

  31:      $(".ul_s").stop().animate({top:"-"+leftpx+"px"},1000);

  32:      }

在这里，向上时，只要找到前面的元素，向后时只要找到后面的元素，进行定位，就能实现图片的滚动效果了。

转载于:https://www.cnblogs.com/lovecss/archive/2012/07/18/2594149.html