JQ-实现图片纵向滚动的效果

先看效果

            

原理

     

就是黑色div中装一个红色的div；然后 overflow：hide，

两个div的定位方式都是absolute，

然后利用jq改变红色div的top值就ok！

HTML代码

 <div id="outer" class="outer">
      <ul id="slider" class="slider">
        <li><img src="IMG/sam.PNG" alt="sam" /></li>
        <li><img src="IMG/appleImg.PNG" alt="sam" /></li>
        <li><img src="IMG/sony001.PNG" alt="sam" /></li>
        <li><img src="IMG/sonyInfo.jpg" alt="sam" /></li>
        <li><img src="IMG/sonyInfo.jpg" alt="sam" /></li>
      </ul>
      <ul class="num">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
   </div>

css 代码

  img{
      height:180px;
      width:350px;
      display:block;
  }
   .slider,.num{
      position:absolute;
  }
  .slider li {
      list-style:none;
      display:inline;  
  }
  .outer{
      height:180px;
      width:350px;
      overflow:hidden;
      border:1px solid #AAAAAA;
      position:relative;
  }
  .outer ul
  {
      
      list-style:none;
      margin:0px;
      padding:0px;
  }
  .outer ul li{
      
  }

  .num{
      bottom:5px;
      right:5px;
      
  }
  .num li{
      float:left; color:#FF7300;
      text-align:center;
      line-height:16px;
      font-family:Arial;
      font-size:12px;
      cursor:pointer;
      margin:3px 1px;
      border:1px solid ;
      width:12px;
       #FF7300;background-color: #fff;
  }
  .on{
      color:#fff;
      line-height:21px;
      width:21px;
      font-size:18px;
      margin:0 1px;
      border:0;
      background-color:#FF7300;
      font-weight:bold;
      
  }

jq 代码

<script type="text/jscript">
   $(function (){
       var len=$(".num>li").length;
       var index=0;
       var Timer;
       $(".num li").mouseover(function (){
          index=$(".num li").index(this);  //获取当前的索引；
          showImg(index);   
       }).eq(0).mouseover();
       
       $("#outer").hover(function (){
           clearInterval(Timer)
       },function (){
           Timer=setInterval(function (){
              showImg(index);
              index++;
              if(index==len){
                  index=0;
              }
           },3000)
           
       }).trigger("mouseleave");
   })

  function showImg(index){
    var he=$("#outer").height();
    //alert(he)
$("#slider").stop(true,false).animate({top:-(he*index)},300); //向上的效果；
    $(".num li").removeClass("on").eq(index).addClass("on");  //这是下标的变化
  }


</script>

总结：

代码简洁（看了js代码后，你会发现这个其实，真的很简洁），借助jq动画帮助，效果已经很不错了，不过要是你最求完美的话！

亲，阅读我的另外一篇文章：

JS-实现图片的横向滑动！