码迷,mamicode.com
首页 > Web开发 > 详细

JQuery图片轮播滚动效果(网页效果--每日一更)

时间:2014-09-19 22:23:36      阅读:391      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   java   ar   for   div   

  今天,带来的是一个图片的轮播滚动效果!

  先来看一下效果展示:http://webfront.verynet.cc/pc/index.html

  原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次。而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的后面,详细请看代码。

 

  HTML结构代码如下:

 1     <div class="content">
 2         <div class="box">
 3             /*滚动的盒子*/
 4             <ul id="scroll_box">
 5                 <li><img src="../Images/1.jpg" alt=""/></li>
 6                 <li><img src="../Images/2.jpg" alt=""/></li>
 7                 <li><img src="../Images/3.jpg" alt=""/></li>
 8                 <li><img src="../Images/4.jpg" alt=""/></li>
 9                 <li><img src="../Images/5.jpg" alt=""/></li>
10                 <li><img src="../Images/6.jpg" alt=""/></li>
11                 <li><img src="../Images/7.jpg" alt=""/></li>
12                 <li><img src="../Images/8.jpg" alt=""/></li>
13                 <li><img src="../Images/9.jpg" alt=""/></li>
14                 <li><img src="../Images/10.jpg" alt=""/></li>
15             </ul>
16         </div>
17     </div>

 

  样式代码:

1     <style type="text/css">
2         *{margin:0px;padding:0px;}
3         .content{width:800px;margin:30px auto;height:200px;}
4         .box{width:800px;overflow:hidden;height:200px;}
5         #scroll_box{list-style:none;}
6         #scroll_box li{width:200px;float:left;height:200px;}
7         #scroll_box li img{width:200px;height:200px;}
8     </style>

 

  JS脚本代码:

 1     <script type="text/javascript">
 2         var length = $("#scroll_box li").length;
 3         var liWidth = $("#scroll_box li").outerWidth(true);
 4         var boxWidth = $(".box").outerWidth(true);
 5         var showLength = Math.ceil(boxWidth / liWidth); //显示图片个数
 6         var speed = 1000;   //滚动速度
 7         var time = 3000;    //滚动间隔
 8         var scrollIndex = 1;    //每次滚动的图片数量
 9         $("#scroll_box").css("width",length * liWidth);     //设置滚动盒子宽度
10         function scroll(){
11             $("#scroll_box").stop().animate({"margin-left":"-"+scrollIndex*liWidth+"px"},speed,function(){
12                 $("#scroll_box").css("margin-left",0);
13                 for(var i =0;i < scrollIndex;i++){
14                     //将第一张图片放到最后一张图片后面
15                     $("#scroll_box").find("li").last().after($("#scroll_box").find("li").first());
16                 }
17             });
18         }
19         setInterval(scroll,time);
20     </script>

 

  其中需要注意的是,在脚本中,我们需要一个for循环来控制图片的换位操作。这里的循环次数取决于我们每次滚动图片的数量。读者可以亲自尝试。

 

  享受代码,享受生活。网页效果,每日一更。

JQuery图片轮播滚动效果(网页效果--每日一更)

标签:style   blog   http   color   io   java   ar   for   div   

原文地址:http://www.cnblogs.com/ChampionLam/p/3981762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!