js 写 视频轮播

html代码

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代码

javascript 复制代码
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代码

javascript 复制代码
.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; }

效果图👇

不想手写可以参考jquery插件库

http://caibaojian.com/swiper-api/effects/193.html

Swiper demo

可参考我的文章👉swiper Demo

相关推荐
正在学习前端的---小方同学2 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
键盘不能没有CV键5 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
你的人类朋友7 小时前
【Node】认识multer库
前端·javascript·后端
昔人'8 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'9 小时前
css `dorp-shadow`
前端·css
涛涛讲AI9 小时前
一段音频多段字幕,让音频能够流畅自然对应字幕 AI生成视频,扣子生成剪映视频草稿
人工智能·音视频·语音识别
可触的未来,发芽的智生9 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
前端开发爱好者9 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀10 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
天***889611 小时前
js封装一个双精度算法实现
开发语言·前端·javascript