<div class="wrapper">
<ul class="sliderPage">
<li><img src="image/1.jpg" alt=""></li>
<li><img src="image/2.jpg" alt=""></li>
<li><img src="image/3.jpg" alt=""></li>
<li><img src="image/4.jpg" alt=""></li>
<li><img src="image/1.jpg" alt=""></li>
</ul>
<div class="btn leftBtn"><</div>
<div class="btn rightBtn">></div>
<div class="sliderIndex">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/index.js"></script>
轮播图的相关组件元素以及图片的导入,设置div,ul,span的class,上面有2张1.jpg图片是为了在第一张和第四张图片切换时能够无缝切换。
var sliderPage=document.getElementsByClassName("sliderPage")[0];
var moveWidth=sliderPage.children[0].offsetWidth;
var num=sliderPage.children.length -1;
var lock=true;
var leftBtn=document.getElementsByClassName("leftBtn")[0];
var rightBtn=document.getElementsByClassName("rightBtn")[0];
var timer=setTimeout(autoMove,2500);
console.log(leftBtn);
leftBtn.onclick=function(){
autoMove("pre");
}
rightBtn.onclick=function(){
autoMove("next")
}
声明获取相关元素节点,设置2个点击事件用来切换到上一张图片和下一张图片;设置了一个计时器timer,没2500毫秒调用一次autoMove函数。
如图有两个div按钮可以操作切换图片。
function autoMove(direction){
if(lock){
lock=false;
clearTimeout(timer);
if(!direction || direction=="next"){
startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},
function(){
if(sliderPage.offsetLeft== - num * moveWidth){
sliderPage.style.left="0px";
}
var timer=setTimeout(autoMove,2500);
lock=true;
})
}
else if(direction=="pre"){
if(sliderPage.offsetLeft==0){
sliderPage.style.left=- num * moveWidth +"px";
}
startMove(sliderPage,{left:sliderPage.offsetLeft + moveWidth},
function(){
timer = setTimeout(autoMove,2500)
lock = true;
var timer=setTimeout(autoMove,2500);
lock=true;
})
}
}
}
autoMove函数通过if判断循环调用timer计时器实现了图片自动轮播,通过点击div触发事件改变if判定结果,从而修改ul.style.left的值来实现图片的切换和自动轮播,通过判断 sliderPage.style.left的值来判断图片是第一张还是最后一张,然后进行图片切换;把计时器写在回调函数中,可以在函数执行结束后再调用计时器(也就是等上一张图片移动结束后,才会执行接下来的操作)。
这里记得使用setTimeout延时计时器,不要使用循环计时器,循环计时器会导致在点击左右切换图片时,上一个计时器还没有结束,就调用下个计时器,导致图片移动会出现一点问题。
上面的lock(开关思想)也是为了等一张图片移动结束后在进行其他操作。
function startMove(dom, attrObj,callback) {
clearInterval(dom.timer)
var iSpeed = null,
iCur = null; //步长(元素样式变化的长度)
dom.timer = setInterval(function () {
var bStop = true;
for (var attr in attrObj) {
if (attr == "opacity") {
iCur = parseFloat(getStyle(dom, attr)) * 100
} else {
iCur = parseFloat(getStyle(dom, attr))
}
iSpeed = (attrObj[attr] - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
if (attr == "opacity") {
dom.style.opacity = (iCur + iSpeed) / 100
} else {
dom.style[attr] = iCur + iSpeed + "px"
}
if(iCur != attrObj[attr]){
bStop = false
}
}
if(bStop){
clearInterval(dom.timer)
typeof callback == "function" && callback()
}
}, 30)
}
function getStyle(dom,attr){
if(window.getComputedStyle){
return window.getComputedStyle(dom,null)[attr]
}else{
return dom.currentStyle[attr]
}
}
上面startMove、getStyle函数封装一个获取元素节点样式以及相关样式的移动变化方法,通过,直接获取该函数,直接调用里面的方法,来实现我们的轮播图。