无缝衔接轮播图——原生JS实现

原理就不讲了，太麻烦了，大致原理就是两扇推拉门，始终保持推拉门处于开启-闭合状态，大致就这样吧，原理很简单，只是说实现比较麻烦，一直想要实现这样的效果，奈何水平不够，也没那么多的时间来研究，趁最近有点闲时，就研究了一下，在部分浏览器上面可能存在一定的加载闪烁，下面是效果图（图片为网图，侵权即删）：

接下来就是源码了，想要明白原理的就自己看代码吧，注释也不想写了，不想明白原理的可以直接拿来用，其他的特效可以自己看着加，这里只是一个简单的demo，提供一种实现无缝轮播的思路，毕竟transition属性定义了就无法干掉：

HTML

<div class="wrap"><ul class="one"><li class="list"><img src="data:images/1.jpg" alt=""></li><li class="list"><img src="data:images/2.jpg" alt=""></li></ul><ul class="two"><li class="list"><img src="data:images/3.jpg" alt=""></li><li class="list"><img src="data:images/4.jpg" alt=""></li></ul>
</div>
<div class="to-left" onclick="toLeft()"><</div>
<div class="to-right" onclick="toRight()">></div>

CSS

* {padding: 0;margin: 0;
}
ul {list-style: none;
}
img {height: 600px;width: 1200px;
}
.wrap {height: 600px;width: 1200px;overflow: hidden;margin: 50px auto;position: relative;
}
.one, .two {height: 600px;width: 2400px;position: absolute;top: 0;transition: left 1s;
}
.list {float: left;
}
.to-left, .to-right {height: 40px;width: 40px;text-align: center;line-height: 40px;background-color: black;color: white;float: left;margin: 2px 20px;cursor: pointer;
}

JavaScript

var list = document.getElementsByClassName("list");
var one = document.getElementsByClassName("one")[0];
var two = document.getElementsByClassName("two")[0];var status = "right";
var change_flag = 0,changing_flag = false;
var imgs = ["H:/images/1.jpg", "H:/images/2.jpg", "H:/images/3.jpg", "H:/images/4.jpg"];
var img_flag1 = imgs.length - 1, img_flag2 = 0;list[0].getElementsByTagName("img")[0].src = imgs[img_flag1];
list[1].getElementsByTagName("img")[0].src = imgs[(img_flag1 + 1) % imgs.length];
list[2].getElementsByTagName("img")[0].src = imgs[img_flag2];
list[3].getElementsByTagName("img")[0].src = imgs[(img_flag2 + 1) % imgs.length];one.style.opacity = 1;
two.style.opacity = 0;one.style.left = "-1200px";
two.style.left = 0;function toLeft() {if(changing_flag) { return; }toChange("left");changing_flag = true;setTimeout(() => {changing_flag = false;}, 1000);imgLoad(-2);
}function toRight() {if(changing_flag) { return; }changing_flag = true;setTimeout(() => {changing_flag = false;}, 1000);toChange("right");imgLoad(2);
}function toChange(direction) {if(status != direction) {one.style.opacity = two.style.opacity == 0 ? 0 : 1;two.style.opacity = two.style.opacity == 0 ? 1 : 0;change_flag = ++ change_flag % 2;}status = direction;two.style.opacity = one.style.opacity == 0 ? 0 : 1;one.style.opacity = one.style.opacity == 0 ? 1 : 0;two.style.left = one.style.left == "-1200px" ? "-1200px" : 0;one.style.left = one.style.left == "-1200px" ? 0 : "-1200px";
}function imgLoad(num) {list[0].getElementsByTagName("img")[0].src = imgs[img_flag1];list[1].getElementsByTagName("img")[0].src = imgs[(img_flag1 + 1) % imgs.length];list[2].getElementsByTagName("img")[0].src = imgs[img_flag2];list[3].getElementsByTagName("img")[0].src = imgs[(img_flag2 + 1) % imgs.length];if(!change_flag) {img_flag1 = (img_flag1 + imgs.length + num) % imgs.length;}else {img_flag2 = (img_flag2 + imgs.length + num) % imgs.length;}change_flag = ++ change_flag % 2;
}

学习分享，一起成长！以上为小编的经验分享，若存在不当之处，请批评指正！

快乐玩前端：无缝衔接轮播图——原生JS实现相关推荐

史上最简单的无缝衔接轮播图
网上有大量关于使用原生js编写轮播图的例子,不得不说,他们的文章很棒,但是我发现一个缺点,就是他们的轮播图组件太过于完整,添加了很多按钮功能,代码量较大.掩盖了轮播图的最基本也是最重要的实现原理,很容 ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
html 无缝拼接,用jQuery写一个无缝衔接轮播图,超精简又详细
这个在今天之前一直困扰着我,因为之前做毕业设计的时候用到过.但是我觉得网上写的那些实在是太绕太复杂了,所以我只会套用,完全不理解. 由于无聊就自己动手去写,发现其实很简单,反而去参考别人的会把自己绕晕 ...
原生js 移动端无缝衔接轮播图
https://github.com/zhaoyunchong/ApCarousel.git
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
JS经典案例-无缝滚动轮播图（纯JS）
滚动轮播图在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到第一张>最后一张, ...
前端实例练习 - 轮播图
轮播图代码储存在Github 效果预览初衷:很多人在初学前端的时候都会问,"如何入门前端?" 同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 "入 ...
web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

快乐玩前端：无缝衔接轮播图——原生JS实现

无缝衔接轮播图——原生JS实现

快乐玩前端：无缝衔接轮播图——原生JS实现相关推荐

最新文章

热门文章