<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
#box a{
width: 1000px;height: 300px; position: absolute;left: 1000px;top: 0px;}
#box a:nth-child(1){
left: 0px;}
#box img{
width: 1000px;height: 300px;}
#box input{
position:absolute;top: 125px;width: 50px;height: 50px; z-index: 99999999;}
#left{
left: 0px;}
#right{
right: 0px;}
</style>
</head>
<body>
<div id="box">
<div class="imgbox">
<a><img src="../图片/2.jpg" alt=""></a>
<a><img src="../图片/3.jpg" alt=""></a>
<a><img src="../图片/4.jpg" alt=""></a>
<a><img src="../图片/5.jpg" alt=""></a>
</div>
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</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.item = this.imgbox.children;
this.index = 0;
this.iprev = this.item.length-1;
this.init();
}
Banner.prototype.init = function(){
var that = this;
this.left.onclick = function(){
that.leftChangeIndex()
}
this.right.onclick = function(){
that.rightChangeIndex()
}
}
Banner.prototype.leftChangeIndex = function(){
if(this.index === 0){
this.index = this.item.length-1;
}else{
this.index--;
this.iprev = this.index+1
}
this.Render(1)
}
Banner.prototype.rightChangeIndex = function(){
if(this.index === this.item.length-1){
this.index = 0;
this.iprev = this.item.length-1;
}else{
this.index++;
this.iprev = this.index-1;
}
this.Render(-1)
}
Banner.prototype.Render = function(d){
this.item[this.iprev].style.left = 0;
move(this.item[this.iprev],{
left:this.item[0].offsetWidth * d
})
this.item[this.index].style.left = -this.item[0].offsetWidth * d + "px";
move(this.item[this.index],{
left:0})
}
// Banner.prototype.rightRender = function(){
// // console.log(this.iprev,this.index);
// this.item[this.iprev].style.left = 0;
// move(this.item[this.iprev],{left:-this.item[0].offsetWidth})
// this.item[this.index].style.left = this.item[0].offsetWidth + "px";
// move(this.item[this.index], {
// left: 0
new Banner();
</script>
</html>
Implementation of JS seamless carousel diagram
Guess you like
Origin blog.csdn.net/qq_26705343/article/details/112394165
Ranking