无缝轮播图2
<!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> .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden} .imgbox img{width: 1000px;height:300px;position: absolute;left:1000px;top:0;} .imgbox img:nth-child(1){left:0;} .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} </style> </head> <body> <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=""> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div> </div> </body> <script src="../move.js"></script> <script> function Banner(){ this.left = document.getElementById("left") this.right = document.getElementById("right") this.imgbox = document.querySelector(".imgbox") this.img = this.imgbox.children; this.index = 0; // W1.设置要走的索引 this.iPrev = this.img.length - 1; this.init() } Banner.prototype.init = function(){ var that = this; // this.left.onclick = function(){} this.right.onclick = function(){ that.changeIndex() } this.left.onclick = function(){ that.changeIndex1() } } Banner.prototype.changeIndex = function(){ if(this.index == this.img.length-1){ this.index = 0; // W2.当要进来的是第0张时,走的是最后一张 this.iPrev = this.img.length-1 }else{ this.index++; // W3.正常情况下,走的都是进来的上一张,上一张为当前-1 this.iPrev = this.index-1; } this.display(); } Banner.prototype.changeIndex1= function(){ if(this.index == 0){ this.index = this.img.length-1; // W2.当要进来的是最后用一张,走的是第一张 this.iPrev = 0; }else{ this.index--; // W3.正常情况下,走的都是进来的下一张,下一张为当前-1 this.iPrev = this.index+1; } this.display1(); }; Banner.prototype.display = function(){ // W4.根据要走的和要进来的索引 // 先设置初始位置,然后再开始走(move) // 要走的:this.img[this.iPrev] this.img[this.iPrev].style.left = 0; move(this.img[this.iPrev],{left:-this.img[0].offsetWidth}) // 要进来的:this.img[this.index] this.img[this.index].style.left = this.img[0].offsetWidth + "px"; move(this.img[this.index],{left:0}) } Banner.prototype.display1 = function(){ // W4.根据要走的和要进来的索引 // 先设置初始位置,然后再开始走(move) // 要走的:this.img[this.iPrev] this.img[this.iPrev].style.left = 0; move(this.img[this.iPrev],{left:this.img[0].offsetWidth}) // 要进来的:this.img[this.index] this.img[this.index].style.left = -this.img[0].offsetWidth + "px"; move(this.img[this.index],{left:0}) } 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]; } } new Banner(); </script> </html>
简易版:
<!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> .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;} .imgbox img{width: 1000px;height:300px;position: absolute;left:1000px;top:0;} .imgbox img:nth-child(1){left:0;} .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} </style> </head> <body> <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=""> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div> </div> </body> <script src="../move.js"></script> <script> function Banner(){ this.left = document.getElementById("left") this.right = document.getElementById("right") this.imgbox = document.querySelector(".imgbox") this.img = this.imgbox.children; this.index = 0; // W1.设置要走的索引 this.iPrev = this.img.length - 1; this.init() } Banner.prototype.init = 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){ this.index = this.img.length-1; this.iPrev = 0; }else{ this.index--; this.iPrev = this.index+1; } }else{ if(this.index == this.img.length-1){ this.index = 0; // W2.当要进来的是第0张时,走的是最后一张 this.iPrev = this.img.length-1 }else{ this.index++; // W3.正常情况下,走的都是进来的上一张,上一张为当前-1 this.iPrev = this.index-1; } } this.display(type); } Banner.prototype.display = function(type){ // W4.根据要走的和要进来的索引 // 先设置初始位置,然后再开始走(move) // 要走的:this.img[this.iPrev] this.img[this.iPrev].style.left = 0; move(this.img[this.iPrev],{left:-this.img[0].offsetWidth * type}) // 要进来的:this.img[this.index] this.img[this.index].style.left = this.img[0].offsetWidth * type + "px"; move(this.img[this.index],{left:0}) } new Banner(); </script> </html>
长风破浪会有时,直挂云帆济沧海