第一种 简易型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { 1000px; height: 300px; position: relative; margin: 100px auto; } #banner { 1000px; height: 300px; position: relative; } img { 1000px; height: 300px; position: absolute; left: 0; top: 0; } img:nth-child(3){z-index: 1;} #btn input { position: absolute; top: 140px; z-index: 999999; } #right { right: 0; } </style> </head> <body> <div id="box"> <div id="banner"> <img src="img/img/1.jpg" />; <img src="img/img/2.jpg" />; <img src="img/img/3.jpg" />; <img src="img/img/4.jpg" />; <img src="img/img/5.jpg" />; </div> <div id="btn"> <input type="button" name="left" id="left" value="<<<" /> <input type="button" name="right" id="right" value=">>>" /> </div> </div> </body> <script src="js/move.js"> </script> <script type="text/javascript"> function Banner() { this.img = document.querySelectorAll("img"); this.right = document.querySelector("#right"); this.i = 0; this.index = 0; this.init(); } Banner.prototype.init = function() { var that = this; this.right.onclick = function() { that.changeIndex() } } Banner.prototype.changeIndex = function() { if(this.index == this.img.length-1) { this.index = 0; } else { this.index = this.index+1; } this.display() } Banner.prototype.display = function() { this.img[this.index].style.zIndex = this.i++; this.img[this.index].style.width = "0"; move(this.img[this.index],{ 1000 }) } new Banner(); </script> </html> 第二种,移动装图片的大盒子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #banner { 1000px; height: 300px; position: relative; margin: 100px auto; overflow: hidden; } #imgs { height: 300px; position: absolute; left: 0px; top: 0; } #buttons input { position: absolute; top: 140px; z-index: 999999; } #right { right: 0; } #left { left: 0; } img { float: left; } </style> </head> <body> <div id="banner"> <div id="imgs"> <img src="img/img/1.jpg" /> <img src="img/img/2.jpg" /> <img src="img/img/3.jpg" /> <img src="img/img/4.jpg" /> <img src="img/img/5.jpg" /> <img src="img/img/1.jpg" /> </div> <div id="buttons"> <input type="button" name="" id="left" value="<<<" /> <input type="button" name="" id="right" value=">>>" /> </div> </div> </body> <script src="js/move.js"> </script> <script type="text/javascript"> function Banner() { this.banner = document.querySelector("#banner"); this.imgs = document.querySelector("#imgs"); this.img = document.querySelectorAll("img"); this.left = document.querySelector("#left"); this.right = document.querySelector("#right"); this.imgs.style.width = this.img.length * this.img[0].offsetWidth + "px"; this.index = 1; this.init(); } Banner.prototype.init = function() { var that = this; this.left.onclick = function() { that.changeIndexl(); } } Banner.prototype.changeIndexl = function() { if(this.index == 1) { this.index =this.img.length- 2; this.imgs.style.left = -this.img.length*this.img[0].offsetWidth + "px"; } else { this.index = this.index - 1; } this.display(); } Banner.prototype.display = function() { move(this.imgs, { left: -this.index * this.img[0].offsetWidth }) } Banner.prototype.init = function(){ var that = this ; this.right.onclick = function(){ that.changeIndexr(); } this.left.onclick = function(){ that.changeIndexl(); that.onoff=0 } } Banner.prototype.changeIndexr=function(){ if(this.index == this.img.length-1){ this.index = 1; this.imgs.style.left = 0; }else{ this.index = this.index+1; } this.display(); } Banner.prototype.display=function(){ move(this.imgs,{left:-this.index*this.img[0].offsetWidth}) } new Banner(); </script> </html> 第三种 向左运动时在指向的图片后面添加一张图片, 向右运动时在指向的图片前面添加一张图片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #banner{ 1000px;height: 300px;position: relative;margin: 100px auto;overflow: hidden;} #imgs{height: 300px;position: absolute;left: 0;top: 0;} #buttons input{position: absolute;top:140px;z-index: 999999;} #right{right: 0;} #left{left: 0;} img{position:absolute;left:1000px;} img:nth-child(1){left: 0;} </style> </head> <body> <div id="banner"> <div id="imgs"> <img src="img/img/1.jpg"/> <img src="img/img/2.jpg"/> <img src="img/img/3.jpg"/> <img src="img/img/4.jpg"/> <img src="img/img/5.jpg"/> </div> <div id="buttons"> <input type="button" name="" id="left" value="<<<" /> <input type="button" name="" id="right" value=">>>" /> </div> </div> </body> <script src="js/move.js"> </script> <script type="text/javascript"> function Banner (){ this.imgs = document.querySelector("#imgs"); this.img = document.querySelectorAll("img"); this.right= document.querySelector("#right"); this.left= document.querySelector("#left"); this.index = 0; // this.next=this.img.length-1 this.init(); } Banner.prototype.init = function(){ console.log(1) var that = this; this.left.onclick = function(){ that.changeindexl(); } this.right.onclick = function(){ that.changeindexr(); } } Banner.prototype.changeindexl= function(){ if(this.index==0){ this.index=this.img.length-1; this.next = 0 }else{ this.index=this.index-1; this.next = this.index +1; } this.displayl(); } Banner.prototype.displayl= function(){ this.img[this.next].style.left =0+"px"; move(this.img[this.next],{left:1000}) this.img[this.index].style.left =-1000+"px"; move(this.img[this.index],{left:0}) } Banner.prototype.changeindexr = function(){ if(this.index == this.img.length-1){ this.index=0; this.prev=this.img.length-1; }else{ this.index=this.index+1; this.prev = this.index-1; } this.displayr() } Banner.prototype.displayr = function(){ this.img[this.prev].style.left = 0; move(this.img[this.prev],{left:-1000}) this.img[this.index].style.left = 1000+"px"; move(this.img[this.index],{left:0}) } new Banner(); </script> </html>