<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../move.js"></script> <style> .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden} .imgbox{position: absolute;left:0; height: 300px;} .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} </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=""> <!-- W1.复制第一张图片在最后,做过渡用 --> <img src="img/1.jpg" alt=""> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div> </div> </body> <script> function Banner() { this.left=document.querySelector("#left") this.right=document.querySelector("#right") this.imgs=document.querySelectorAll(".imgbox img"); this.imgbox=document.querySelector(".imgbox") this.imgbox.style.width = this.imgs.length * this.imgs[0].offsetWidth + "px"; this.index=0; this.init() } Banner.prototype.init=function () { var that = this; this.right.onclick = function () { that.changeIndex1 (); } the this .left.onclick = function () { that.changeIndex2 (); }; } Banner.prototype.changeIndex1 = function () { IF ( the this .index === the this .imgs.length- . 1 ) { // W2 of the last time when the index back to the second real images, index. 1. the this .index =. 1 ; // . after W3 index set, the left imgbox an initial value of the left : 0 // Move be from left: width1000 0 * came -index1 the this .imgbox.style.left = 0 } the else { the this .index ++ ; } the this .display (); }; Banner.prototype.changeIndex2 = function () { IF ( the this .index == 0 ) { // a first when the cited back penultimate photos index 2-bit length the this .index = the this .imgs.length-2 ; // after the index set, the initial value is set to left -5000px (i.e. left values shown in FIG last). // Move will come from -5000 * 1000 -index the this .imgbox.style.left = - ( the this .imgs.length-. 1) * the this .imgs [0] + .offsetWidth "PX" // console.log(-(this.imgs.length-1)*this.imgs[0].offsetWidth) } else{ this.index-- } this.display() }; Banner.prototype.display=function () { move(this.imgbox,{ left:-this.imgs[0].offsetWidth*(this.index) }) }; new Banner() </script> </html>
Starter Edition
<!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{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} </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=""> <!-- W1.复制第一张图片在最后,做过渡用 --> <img src="img/1.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> // OOA: // OOD: // OOP: 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() } Banner.prototype.init = function(){ var that = this; this.left.onclick = function(){ that.changeIndex(1) } this.right.onclick = function(){ that.changeIndex(-1) } } = Function Banner.prototype.changeIndex (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"; } the else { this.index--; } } {the else IF (this.index. 1-== this.img.length ) { // when W2 of the last index, the second back to the real images, index. 1. this.index =. 1; then // W3 index set, to the left imgbox set to an initial value left.: 0 // Move be from left: * width1000 come -index1 0 this.imgbox.style.left = 0; } the else { this.index++ } } this.display(); } Banner.prototype.display = function(){ move(this.imgbox,{ left:-this.index * this.img[0].offsetWidth }) } new Banner(); </script> </html>