此简单轮播图布局原理是:
一个div包含图片列表,和控制按钮。其宽度等于图片的宽度,溢出隐藏。
图片要左浮动。
jquery原理:
开一个定时器,隔一段时间执行图片列表向左移动一个图片的宽度,同时在移动时设置一个回调函数。
把向左移动的图片,也是图片列表的第一张图片,添加到图片列表ul的末尾。
这样实现了,图片自动播放的效果。
怎么带动图片控制的小按钮变亮?
因为每一次图片轮播,都会改变图片值得索引,那就给函数加一个变量 i ,每一次执行定时器都会i++;
var spanindex=i%4;
图片的索引就和图片的索引同步了。4是按钮的个数。图片移动把对应的spanindex添加一个类即可。
按钮控制轮播图,我就不讲述了。
例子:
<div class="side-img"> <div> <!-----------4个按钮------------------------> <span class="on"></span> <span></span> <span></span> <span></span> </div> <ul> <li><a href=""><img src="images/side-img1.png"/> </a> </li> <li><a href=""><img src="images/side-img2.png"/></a> </li> <li><a href=""><img src="images/side-img3.png"/> </a> </li> <li><a href=""><img src="images/side-img4.png"/></a> </li> </ul> </div>
css代码:
.side-img{ height: 324px; width: 693px; position: relative; overflow: hidden; } .side-img ul{ width:2772px; position: absolute; left: 0; } .side-img li{ float: left; } .side-img li img{ height: 324px; } .side-img div{ position: absolute; left: 316px; top:304px; z-index: 2; } .side-img div span{ float: left; margin-right: 5px; width:8px; height: 8px; background-color: #ffffff; border: 1px solid #d2cfd0; border-radius: 50%; } #main .center .side-img div span.on,#con1 .con1-left .side-img div span.on{ background-color: red; }
jq:
/************图片移动函数库***********/ var timer=null; var i=0; function play(obj,ispeed){ ++i; var spanindex=i%4; var span= $("#main .center .side-img div span") obj.animate({left:ispeed},1000,function(){ $(".side-img ul>li").eq(0).appendTo($(this)); span.eq(spanindex).addClass("on").siblings().removeClass("on"); }) } /************轮播图自动滚动***********/ timer=setInterval(function(){ var obj= $("#main .center .side-img ul") var ispeed= $(".side-img ul li").eq(0).width; play(obj,-ispeed); },3000); /************控制按钮控制图片移动***********/ $("#main .center .side-img div span").hover(function(){ var index=$(this).index(); $(this).addClass("on").siblings().removeClass("on"); clearInterval(timer); var iwidth=index*-693; $(".side-img ul").animate({left:iwidth},500); }, function(){ timer=setInterval(function(){ var ispeed= $(".side-img ul li").eq(0).width; play(ispeed); },3000); })
本人第一次写博客,可能有纰漏的地方,望各位指点。
来源:https://www.cnblogs.com/lw1995/p/6659780.html