js 写视频轮播

news2024/12/23 13:21:29

html代码

<div class="test_box">
<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="1.jpg" alt=""></div>
<div class="test_bottom">我支持你在星空翱翔，敢于追寻宇宙的奥秘。</div>
</div>
</div>
</a>
</div>

<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="2.jpg" alt=""></div>
<div class="test_bottom">我陪着你大胆创新，让更多不可能成为现实。</div>
</div>
</div>
</a>
</div>

<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="3.jpg" alt=""></div>
<div class="test_bottom">我守护你，享受当下，不再担忧那些潜在的危险。</div>
</div>
</div>
</a>
</div>

<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="4.jpg" alt=""></div>
<div class="test_bottom">我守护你，享受当下</div>
</div>
</div>
</a>
</div>

<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="5.jpg" alt=""></div>
<div class="test_bottom">隐形的翅膀</div>
</div>
</div>
</a>
</div>

<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="6.jpg" alt=""></div>
<div class="test_bottom">不再担忧那些潜在的危险</div>
</div>
</div>
</a>
</div>

<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="7.jpg" alt=""></div>
<div class="test_bottom">我守护你，享受当下。</div>
</div>
</div>
</a>
</div>

<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="8.jpg" alt=""></div>
<div class="test_bottom">欧若拉</div>
</div>
</div>
</a>
</div>

<div class="test">
<a href="#">
<div class="test_a_box">
<div class="test_a_mask"></div>
<div class="test_a_layer">
<div class="test_top"></div>
<div class="test_img"><img src="9.jpg" alt=""></div>
<div class="test_bottom">天空一声巨响</div>
</div>
</div>
</a>
</div>

</div>

js代码

window.onload=()=>{
var box = document.querySelectorAll('.test');
var idArray = new Array();
for(let i=0;i<box.length;i++){
switch(i){
case box.length-1 : idArray.push("test_left");break;
case 0 : idArray.push("test_left");break;
case 1 : idArray.push("test_middle");break;
case 2 : idArray.push("test_right");break;
default : idArray.push("test_righ_over");
}
}
init();
var timer = setInterval(next,3000);
function init(){
for(let i=0;i<box.length;i++){
box[i].id=idArray[i];
}
}
function next(){
idArray.unshift(idArray.pop());
init()
}
}

css代码

.test_box{ width:1120px; height:420px; display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; position: relative; margin-left:-120px; overflow:hidden;}
.test_box img{ max-width:100%; max-height:100%; border-radius: 10px; }
.test_box a{ text-decoration: none; font-weight: bold; font-family: "Microsoft YaHei UI",sans-serif; color: #000; }
.test_box a:hover{ font-weight: bolder; color: #B40B20; }
.test{ width:560px; height:400px; margin-right: -40px; border-radius: 15px; box-shadow: 0px 5px 5px #80808061; background-color: #FDFDFD; position: absolute; }
.test_a_box{ position: relative; }
.test_a_mask{ width:560px; height:400px; position: absolute; z-index: 2; }
.test_a_layer{ width:560px; height:400px; }
.test_img{ width: 480px; height: 270px; margin: 20px auto; display: flex; }
.test_top{ width:100%; height:35px; background-color:#B40B20; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.test_bottom{ margin: auto; width: calc(100% - 40px); height:30px; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; font-size: 16px; }
#test_left_over{ transform:translateX(-300px); z-index:10; opacity:1; }
#test_left{ transform:translateX(0) scale(0.6); z-index:10; opacity:1; }
#test_left .test_a_mask{ background: -webkit-linear-gradient(right, #ffffffd6 0%, #fff0 80%); }
#test_middle{ transform:translateX(336px) scale(1); z-index:100; opacity:1; }
#test_right{ transform:translateX(672px) scale(0.6); z-index:10; opacity:1; }
#test_right .test_a_mask{ background: -webkit-linear-gradient(left, #ffffffd6 0%, #fff0 80%); }
#test_righ_over{ transform:translateX(1140px); z-index:10; opacity:1; display:none; }

效果图👇