无缝轮播图
Posted syj1205
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝轮播图相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .cont{width:1000px;height:260px;margin: 20px auto;position: relative;overflow: hidden;} .imgbox{position: absolute;left:0;top:0;} /* 1.将所有图片排成一行 */ .imgbox a{float:left;width:1000px;height:260px;overflow: hidden;} .imgbox img{width:1000px;height:260px;} .imgbox a:nth-child(1){z-index: 1;} .btns{} .btns input{width:40px;height:40px;border: none;background: rgba(200,200,200,0.4);position: absolute;top:110px;z-index: 999999;} .left{left:0;} .right{right:0;} </style> </head> <body> <div class="cont"> <div class="imgbox"> <a href=""><img src="img/1.jpg" ></a> <a href=""><img src="img/2.jpg" ></a> <a href=""><img src="img/3.jpg" ></a> <a href=""><img src="img/4.jpg" ></a> <!-- 2.复制第一张图，放在最后一张图的后面，用来过渡 --> <a href=""><img src="img/1.jpg" ></a> </div> <div class="btns"> <input type="button" class="left" value="<<<"> <input type="button" class="right" value=">>>"> </div> </div> </body> <script src="../move.js"></script> <script> function Banner(){ this.imgbox = document.querySelector(".imgbox") this.img = this.imgbox.children; this.left = document.querySelector(".left") this.right = document.querySelector(".right") this.index = 0; this.init(); this.addEvent(); } Banner.prototype.init = function(){ this.imgbox.style.width = this.img.length * this.img[0].offsetWidth + "px"; } Banner.prototype.addEvent = function(){ var that = this; this.left.onclick = function(){ that.changeIndex(1); } this.right.onclick = function(){ that.changeIndex(-1); } } Banner.prototype.changeIndex = function(type){ if(type == 1){ if(this.index == 0){ // 3-1.将索引设置成本来要显示的图片的索引 this.index = this.img.length-2; // 4-1.将大长条设置下一轮播放的默认位置 this.imgbox.style.left = -(this.img.length-1) * this.img[0].offsetWidth + "px"; }else{ this.index--; } }else{ if(this.index == this.img.length-1){ // 3-2.将索引设置成本来要显示的图片的索引 this.index = 1; // 4-2.将大长条设置下一轮播放的默认位置 this.imgbox.style.left = 0; }else{ this.index++; } } this.move(); } Banner.prototype.move = function(){ // console.log(this.index) move(this.imgbox,{left:-this.img[0].offsetWidth*this.index}); } new Banner();
以上是关于无缝轮播图的主要内容，如果未能解决你的问题，请参考以下文章