首页 > 开发 > CSS > 正文

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

2017-09-12 09:34:54  来源: 网友分享

https://www.apple.com/

像蘋果網站一樣

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

解决方案

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

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)