首页 > 代码库 > JQuery图片轮播滚动效果(网页效果--每日一更)
JQuery图片轮播滚动效果(网页效果--每日一更)
今天，带来的是一个图片的轮播滚动效果！
先来看一下效果展示：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图片轮播滚动效果(网页效果--每日一更)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。