javascript - 如何自寫一個簡單的切換?
本文介绍了javascript - 如何自寫一個簡單的切換?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
像蘋果網站一樣
這一塊橫幅會自動撥,也可手動切
要怎麼自己寫?或????
我怕用套件,到時候想改就沒完沒了
解决方案
//第一步:首先克隆第一张图片,放到所有图片的最后,在后面实现自动无缝轮播的时候用
var firstImg = ulLis[0].cloneNode(true);
ul.appendChild(firstImg);
//第二步:设置一下左右箭头的点击事件
var pic = 0;
var flag = 0;
right.onclick = function () {
if (pic === ulLis.length - 1) {
pic = 0;
ul.style.left = 0;
}
else{
pic++;
var target = -pic * imgWidth;
ul.style.left = target
}
};
left.onclick = function () {
if (pic === 0) {
pic = ulLis.length-1;
ul.style.left = -(ulLis.length-1) * imgWidth+"px";
}
else{
pic--;
var target = -pic * imgWidth;
ul.style.left =target
}
};
//设置定时器,实现自动轮播
box.timer = setInterval(function () {
right.onclick()
},2000)
这篇关于javascript - 如何自寫一個簡單的切換?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文