Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
137 views
in Technique[技术] by (71.8m points)

如何自寫一個簡單的切換?

https://www.apple.com/

像蘋果網站一樣

clipboard.png

這一塊橫幅會自動撥,也可手動切
要怎麼自己寫?或????
我怕用套件,到時候想改就沒完沒了


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

//第一步:首先克隆第一张图片,放到所有图片的最后,在后面实现自动无缝轮播的时候用

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)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...