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

发布于 2022-09-04 14:40:36 字数 302 浏览 11 评论 0

https://www.apple.com/

像蘋果網站一樣

clipboard.png

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

初心 2022-09-11 14:40:36

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

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)
不乱于心 2022-09-11 14:40:36

这不是轮播图吗,直接用js或者jquery都可以啊,可以看下jQuery无缝轮播图代码,希望对你有帮助

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文