原生JS实现无缝轮播图

谁借莪１个温暖的怀抱￠ 2024-04-18 20:56 78阅读 0赞

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

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

## 1 利用left来实现 ##

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

我们需要一个盒子来装所有图片，给它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之前我们需要用到一个缓冲运动的函数，这里我已经做好了封装，直接引用即可

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

再来看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){ 
                    // 当索引到最后一个时，回到真正的第二张图片，索引为1
                    this.index = 1;
                    // 索引设置好之后，将imgbox的left设置成初始值left:0
                    // move会从left:0走到-index1*width1000
                    this.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结构部分

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

再看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函数）

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

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