JS循环轮播图

来源：互联网发布：淘宝神笔下载编辑：程序博客网时间：2024/05/29 12:56

<!DOCTYPE html>

<head>

<style>

#container{

position: relative;

height: 400px;

width: 1240px;

margin: 50px auto;

}

.img{

position: absolute;

width: 450px;

height: 300px;

top: 50px;

left: 395px;

bottom: 0;

z-index: 0;

background-color: #404040;

font-size: 48px;

color: #fff;

transition: all 0.8s ease-out;

}

.img:nth-of-type(1){

width: 450px;

height: 300px;

top: 50px;

left: 0;

z-index: 1;

opacity: 0.8;

}

.img:nth-of-type(2){

width: 525px;

height: 350px;

top: 25px;

left: 140px;

z-index: 2;

opacity: 0.9;

}

.img:nth-of-type(3){

width: 600px;

height: 400px;

top: 0;

left: 320px;

z-index: 3;

opacity: 1;

}

.img:nth-of-type(4){

width: 525px;

height: 350px;

top: 25px;

left: 575px;

z-index: 2;

opacity: 0.9;

}

.img:nth-of-type(5){

width: 450px;

height: 300px;

top: 50px;

left: 790px;

z-index: 1;

opacity: 0.8;

}

</style>

</head>

<body>

</div>

</body>

var imgs = document.getElementsByClassName("img");

var container = document.getElementById("container");

var imgSrc = ["http://cdn.attach.qdfuns.com/notes/pics/201710/26/120712ngt2edra2crr7dgd.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120652w2q5xqqr8lt9ry7r.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120714s2o8oolp628lhnhb.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120553pqqp08q6pkkqpq8o.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120641af8ja5noa88joc8n.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120644mwoeh09r9rzwxzn8.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120725h4jskiflsivw15k1.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120635qga4ljgurljnzrvj.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120728nn78gfnyinf2gf7i.jpg", "http://cdn.attach.qdfuns.com/notes/pics/201710/26/120632lpjom8ppsl26dd68.jpg"];

var numA = 2;

var numB = 0;

for (var i = 0; i < imgs.length; i ++) {

imgs[i].src = imgSrc[i];

imgs[i].index = i;//给每张图片添加一个序号，通过这个序号来计算套用哪个样式

}

for ( var k = 0; k < imgs.length; k ++) {

imgs[k].onclick = function () {

//通过激活序号(numA)和当前按钮序号(numB)的差算出新的序号,用for来更新一遍

numB = this.index;

for (var i = 0; i < imgs.length; i ++) {

if (imgs[i].index + numA - numB >= 0) {

imgs[i].index = (imgs[i].index + numA - numB) % imgs.length;

} else if (imgs[i].index + numA - numB < 0) {

imgs[i].index = imgs[i].index + numA - numB + imgs.length;

}

//根据序号刷新样式

if (imgs[i].index === 0) {

imgs[i].style.width = 450 + "px";

imgs[i].style.height = 300 + "px";

imgs[i].style.zIndex = 1;

imgs[i].style.top = 50 + "px";

imgs[i].style.left = 0 + "px";

imgs[i].style.opacity = 0.5

} else if (imgs[i].index === 1) {

imgs[i].style.width = 525 + "px";

imgs[i].style.height = 350 + "px";

imgs[i].style.zIndex = 2;

imgs[i].style.top = 25 + "px";

imgs[i].style.left = 140 + "px";

imgs[i].style.opacity = 0.8

} else if (imgs[i].index === 2) {

imgs[i].style.width = 600 + "px";

imgs[i].style.height = 400 + "px";

imgs[i].style.top = 0 + "px";

imgs[i].style.zIndex = 3;

imgs[i].style.left = 320 + "px";

imgs[i].style.opacity = 1

} else if (imgs[i].index === 3) {

imgs[i].style.width = 525 + "px";

imgs[i].style.height = 350 + "px";

imgs[i].style.zIndex = 2;

imgs[i].style.top = 25 + "px";

imgs[i].style.left = 575 + "px";

imgs[i].style.opacity = 0.8

} else if (imgs[i].index === 4) {

imgs[i].style.width = 450 + "px";

imgs[i].style.height = 300 + "px";

imgs[i].style.zIndex = 1;

imgs[i].style.top = 50 + "px";

imgs[i].style.left = 790 + "px";

imgs[i].style.opacity = 0.5

} else {

imgs[i].style.width = 450 + "px";

imgs[i].style.height = 300 + "px";

imgs[i].style.zIndex = 0;

imgs[i].style.top = 50 + "px";

imgs[i].style.left = 395 + "px";

imgs[i].style.opacity = 0

}

};

}

//定时器部分

function play() {

//自动播放相当于点击序号2的图片

for (var j = 0; j < imgs.length; j ++) {

if (imgs[j].index === 1) {

imgs[j].onclick();

break //这个break不能省,不然会有bug

}

var imgPlay = window.setInterval(play,2000);

container.onmouseover = function () {

window.clearInterval(imgPlay);

};

container.onmouseout = function () {

imgPlay = window.setInterval(play,2000);

};

</script>

</html>

资料进群领取598399936

阅读全文

0 0