轮播图一条龙

Posted 2021-02-14 sword082419

 

CSS部分

<style type="text/css">

*{
margin: 0px auto;
padding: 0px;
}
button{
width: 46px;
height: 30px;
}
.box{
width: 300px;
height: 400px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
.tp{
width: 300px;
height: 400px;
background-image: url(img/111111.jpg);
position: absolute;
z-index: 0;
margin-left: 0px;
transition: margin-left 0s;
}
</style>

html部分
<div class="box">
<div class="tp" style="background-image: url(img/111111.jpg); margin-left: 300px;"></div>
<div class="tp" style="background-image: url(img/222222.jpg);"></div>
<div class="tp" style="background-image: url(img/333333.jpg);"></div>
<div class="tp" style="background-image: url(img/444444.jpg);"></div>
</div>
<div class="box" style="height: 30px;">
<button onclick="djl()">上一张</button>
<button onclick="dj(‘0‘)">1</button>
<button onclick="dj(‘1‘)">2</button>
<button onclick="dj(‘2‘)">3</button>
<button onclick="dj(‘3‘)">4</button>
<button onclick="djr()" id="123123">下一张</button>
</div>

 

JS部分

<script type="text/javascript">
// 找到需要的元素
var zhaotu = document.getElementsByClassName("tp");
var zhaobox = document.getElementsByClassName("box");
// 设置、清除、重置定时器
var timer1 = setInterval(lunbor,1000);
for (var i = 0;i < zhaobox.length;i++) {
zhaobox[i].onmouseover = function(){
clearTimeout(timer1);
}
zhaobox[i].onmouseout = function(){
timer1 = setInterval(lunbor,1000);
}
}
// 轮播向右函数
function lunbor(){
for(var j = 0;j <zhaotu.length;j++){
// j只是控制for循环,不参与轮播
var i = 0;
while((i < zhaotu.length-1) && (getComputedStyle(zhaotu[i]).zIndex != 2) ){
i++;
}
// 通过while循环找到zIndex=2的层(下标为i的层),把这一层改为最高层(zIndex=3的层)并移走
}
var x = i - 1;
if(x == -1){
x = 3;
}
// (下标为x的层)是移走最高层以后要显示的层,在轮播中也就是最高层的前一个元素,当最高层的下标i为0时,x为-1，要吧x改为3重置循环。
var y = i + 1;
if(y == 4){
y = 0;
}
// (下标为y的层)是上一个循环移走的最高层，在轮播中也就是当前循环中最高层的后一个元素，当最高层的下标i为3时,y为4，要吧y改为0重置循环。
zhaotu[y].style.zIndex = 0;
zhaotu[x].style.zIndex = 2;
zhaotu[i].style.zIndex = 3;
zhaotu[x].style.transition = "margin-left 0s";
zhaotu[x].style.marginLeft = "0px";
zhaotu[i].style.transition = "margin-left 1s";
zhaotu[i].style.marginLeft = "300px";
}
// 轮播向左函数
function lunbol(){
for(var j = 0;j <zhaotu.length;j++){
// j只是控制for循环,不参与轮播
var i = 0;
while((i < zhaotu.length-1) && (getComputedStyle(zhaotu[i]).zIndex != 2) ){
i++;
}
// 通过while循环找到当前显示的层(下标为i的层),并改为1层。
}
var x = i + 1;
if(x == 4){
x = 0;
}
// 下标为x的层是最高层,需要移回并改为第二层，在轮播中也就是当前显示元素的后一个元素,当前层的下标i为3时,x为4，要把x改为0重置循环。
var y = x + 1;
if(y == 4){
y = 0;
}
var z = y + 1;
if(z == 4){
z = 0;
}
// 下标为y的层是最高层的后一层，需要移出并改为最高层，在轮播中是移回元素的后一个元素，当最高层的下标i为3时,y为4，要吧y改为0重置循环。
zhaotu[i].style.zIndex = 1;
zhaotu[i].style.transition = "margin-right 0s";
// zhaotu[i].style.marginLeft = "300px";
zhaotu[i].style.marginRight = "0px";
zhaotu[z].style.zIndex = 0;
zhaotu[y].style.zIndex = 3;
zhaotu[x].style.zIndex = 2;
zhaotu[y].style.transition = "margin-left 0s";
zhaotu[y].style.marginLeft = "300px";
zhaotu[x].style.transition = "margin-left 0.5s";
zhaotu[x].style.marginLeft = "0px";
}
// 按钮对应图片函数
function dj(x){
var i = 0;
while((i < zhaotu.length-1) && (getComputedStyle(zhaotu[i]).zIndex != 2) ){
i++;
}
var j = 0;
while((j < zhaotu.length-1) && (getComputedStyle(zhaotu[i]).zIndex != 3) ){
j++;
}
if (i == x) {
} else{
zhaotu[0].style.zIndex = 0;
zhaotu[1].style.zIndex = 0;
zhaotu[2].style.zIndex = 0;
zhaotu[3].style.zIndex = 0;
zhaotu[x].style.zIndex = 2;
zhaotu[i].style.zIndex = 3;
zhaotu[x].style.transition = "margin-left 0s";
zhaotu[x].style.marginLeft = "0px";
zhaotu[i].style.transition = "margin-left 1s";
zhaotu[i].style.marginLeft = "300px";
}
}
// 向右按钮函数（调用一次轮播向右函数）
function djr(){
lunbor()
}
// 向左按钮函数（调用一次轮播向左函数）
function djl(){
lunbol()
}
</script>