原生JS实现无缝轮播图

不论是app，还是网站，基本上都会出现轮播图，今天和大家分享使用面向对象实现无缝轮播图的两种方式。

轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。

1 利用left来实现

先来准备html结构
这里需要在最后一张图片的后面添加第一张图片，作用是用来过渡。

		<div class="banner"><div class="imgbox"><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/5.jpg" alt=""><!-- .复制第一张图片在最后，做过渡用 --><img src="img/1.jpg" alt=""></div><div class="btns"><input type="button" id="left" value="<<<"><input type="button" id="right" value=">>>"></div></div>

我们需要一个盒子来装所有图片，给它class设为imgbox
在图片上还有左右两个按钮，点击就可以切换图片。

下面来看css如何书写

		.banner{width:1000px;height:300px;margin: 20px auto;position: relative;}.imgbox{position: absolute;left:0;}.imgbox img{width: 1000px;height:300px;float:left;}.btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);}#left{left:0;}#right{right:0;}

这里我们需要操作imgbox，所以我们给它加上定位
然后imgbox的宽高我们去js里面去写，让其中的图片排成一行，每张宽高都为banner的宽高
左右按钮分别定位到盒子的左右两边

接下来我们来看js部分
再看js之前我们需要用到一个缓冲运动的函数，这里我已经做好了封装，直接引用即可

function move(ele,json,callback){clearInterval(ele.t);ele.t = setInterval(() => {var onoff = true;for(var i in json){var iNow = parseInt(getStyle(ele,i));var speed = (json[i] - iNow)/6;speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);if(iNow != json[i]){onoff = false;}ele.style[i] = iNow + speed + "px";}if(onoff){clearInterval(ele.t);callback && callback();}}, 30);
}
function getStyle(ele,attr){if(ele.currentStyle){return ele.currentStyle[attr];}else{return getComputedStyle(ele,false)[attr];}
}

就是一个多元素多属性的缓冲运动的封装

再来看js部分

1.先获取元素

    function Banner(){this.left = document.getElementById("left")this.right = document.getElementById("right")this.imgbox = document.querySelector(".imgbox")this.img = this.imgbox.children;this.imgbox.style.width = this.img.length * this.img[0].offsetWidth + "px";this.index = 0;this.init()}

这里给imgbox的宽度设置为图片的宽度*图片的张数
这里的index是图片的索引

接下来给Banner身上绑定原型init

   Banner.prototype.init = function(){var that = this;this.left.onclick = function(){that.changeIndex(1)}this.right.onclick = function(){that.changeIndex(-1)}}

接下来给Banner身上绑定原型changeIndex

Banner.prototype.changeIndex = function(type){if(type == 1){if(this.index == 0){this.index = this.img.length-2;this.imgbox.style.left = -(this.img.length-1) * this.img[0].offsetWidth + "px";}else{this.index--;}}else{if(this.index == this.img.length-1){// 当索引到最后一个时，回到真正的第二张图片，索引为1this.index = 1;// 索引设置好之后，将imgbox的left设置成初始值left:0// move会从left:0走到-index1*width1000this.imgbox.style.left = 0;}else{this.index++}}this.display();}

这里我把左右写在了一起，虽然增加了耦合，但是提高了性能吧

接下来给Banner身上绑定原型display

Banner.prototype.display = function(){move(this.imgbox,{left:-this.index * this.img[0].offsetWidth})}new Banner();

写到这里就可以打开页面看效果啦，一个五分轮播图就实现了。

2 使用表演，演出的思想

有进去的图片，也有出来的图片

先来看html结构部分

<div class="box"><div class="imgbox"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1323184158,2831379164&fm=26&gp=0.jpg" alt=""><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3805720222,3688992453&fm=26&gp=0.jpg" alt=""><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=634457050,2406665696&fm=26&gp=0.jpg" alt=""><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=541767597,3807095336&fm=26&gp=0.jpg" alt=""><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3687724866,1680191173&fm=26&gp=0.jpg" alt=""></div><div class="btns"><input type="button" id="left" value="<<<"><input type="button" id="right" value=">>>"></div>
</div>

跟上种方法没什么区别，这里图片就保留五张就好了，不需要过度的图片了。

再看css样式部分

.box {width: 1600px;height: 900px;border: 1px solid #333;margin: 30px auto;position: relative;overflow: hidden;}.imgbox img {width: 1600px;height: 900px;position: absolute;left: 1600px;top: 0;}.imgbox img:nth-child(1) {left: 0;}.btns input {width: 60px;height: 100px;text-align: center;line-height: 100px;font-size: 20px;background-color: rgba(200,200,200,.7);color: #fff;position: absolute;top: 400px;border: none;cursor: pointer;z-index: 9999;}#left {left: 0;}#right {right: 0;}

这里吧所有图片放在left值为1600px的位置，然后将第一张图片left设置为0
左右按钮设置不变

接下来看js部分（这里也用到了move函数）

<script src="../../move.js"></script>
<script>function Tab() {this.left=document.querySelector("#left");this.right=document.querySelector("#right");this.imgbox=document.querySelector(".imgbox");this.img=this.imgbox.children;this.index=0;   //进来this.iprev=this.img.length-1;   //出去this.init();}Tab.prototype.init=function() {var that=this;this.right.onclick=function() {that.changer();}this.left.onclick=function() {that.changel();}};Tab.prototype.changer=function() {if(this.index == this.img.length-1) {this.index=0;this.iprev=this.img.length-1;}else {this.index++;this.iprev=this.index-1;}this.gor();};Tab.prototype.changel=function() {if(this.index == 0) {this.index = this.img.length-1;this.iprev = 0;}else {this.index--;this.iprev = this.index+1}this.gol();};Tab.prototype.gor=function () {//进来的this.img[this.index].style.left=this.img[0].offsetWidth+"px";move(this.img[this.index],{left: 0});//出去的this.img[this.iprev].style.left=0;move(this.img[this.iprev],{left: -this.img[0].offsetWidth});};Tab.prototype.gol=function () {//进来的this.img[this.index].style.left = -this.img[0].offsetWidth+"px";move(this.img[this.index],{left:0})//出去的this.img[this.iprev].style.left = 0;move(this.img[this.iprev],{left:this.img[0].offsetWidth})};new Tab();
</script>

在这里我没有放在一起了，而是分开来写的
在移动前先要分清要进去的和要出来的，把他们的初始位置设置好
然后利用move函数分开将他们的目标位置写给left即可。

过两天就是中秋了，在这我提前祝大家中秋快乐哈！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！