今天制作了一个自动轮播图,记录一下
方法:
利用一个无序列表,将图片放置1行,控制 ul
的left
控制当前显示的是哪张图片,利用动画显示左右切换的效果。
监听resize事件,让大小自动适应
Github demo地址:
https://github.com/huxinxue/demo/blob/master/轮播图片.rar
满意的话就star一下吧
效果展示:
话不多说,直接上代码:
html:
<!-- 图片 -->
<ul>
<li class="img1"></li>
<li class="img2"></li>
<li class="img3"></li>
<li class="img4"></li>
<li class="img5"></li>
</ul>
<!-- 小圆点 -->
<div>
<p>
<span class="active"> </span>
<span> </span>
<span> </span>
<span> </span>
</p>
</div>
注意
- 所有图片都在同一行,通过设置
li
的背景图显示图片 - css中 .img1 与 .img5 对应是同一张图片
js:
var num = 5;
var h = window.screen.height;
// var w = window.screen.width;
var w = document.body.clientWidth;
$("ul").width(w * num);
$("li").height(window.screen.height );
$("li").width(w );
$("div p").width(w);
var spans = $('span');
var i = 0;
var j = 0;
//递归调用,循环执行
//.img的执行顺序 1,2,3,4,5,2,3,4,5,2。。。。
//图片的循环顺序: 1,2,3,4,1,2,3,4,1,2。。。。
function scroll(argument) {
//去掉当前小圆点的active
$(spans[j]).removeClass("active");
i++;
j++;
if(i==num) {
// 图片循环
i = 0;
$("ul").css("left",0);
i++;
}
if(j==num-1){
// 小圆点循环
j=0;
}
// 利用向左移动更换图片
$("ul").animate({left:"-"+w*i+"px"},"slow");
//加上目标小圆点的active
$(spans[j]).addClass("active");
// 循环调用
setTimeout(scroll,3000);
}
setTimeout(scroll,3000);
window.onresize = function(){
// 大小改变时重置各元素的宽度
w = document.body.clientWidth;
$("ul").width(w * num);
$("li").width(w);
$("div p").width(w);
$("ul").css("left",-1*w*i);
}