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>
View Code

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;
      
  }
View Code

jq 代码

 1 <script type="text/jscript">
 2    $(function (){
 3        var len=$(".num>li").length;
 4        var index=0;
 5        var Timer;
 6        $(".num li").mouseover(function (){
 7           index=$(".num li").index(this);  //获取当前的索引；
 8           showImg(index);   
 9        }).eq(0).mouseover();
10        
11        $("#outer").hover(function (){
12            clearInterval(Timer)
13        },function (){
14            Timer=setInterval(function (){
15               showImg(index);
16               index++;
17               if(index==len){
18                   index=0;
19               }
20            },3000)
21            
22        }).trigger("mouseleave");
23    })
24 
25   function showImg(index){
26     var he=$("#outer").height();
27     //alert(he)
28 $("#slider").stop(true,false).animate({top:-(he*index)},300); //向上的效果；
29     $(".num li").removeClass("on").eq(index).addClass("on");  //这是下标的变化
30   }
31 
32 
33 </script>
View Code

总结：

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

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

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

 

posted @ 2015-09-18 12:07  咕-咚  阅读(1696)  评论(0)  编辑  收藏  举报