第一种 简易型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 1000px;
height: 300px;
position: relative;
margin: 100px auto;
}
#banner {
width: 1000px;
height: 300px;
position: relative;
}
img {
width: 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],{
width:1000
})
}
new Banner();
</script>
</html>
第二种,移动装图片的大盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#banner {
width: 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{width: 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> 转载于:https://www.cnblogs.com/huangping199541/p/11462084.html
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)