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

相关推荐
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
小白白一枚1118 小时前
css实现div被图片撑开
前端·css
我喜欢就喜欢8 小时前
基于qt vs下的视频播放
开发语言·qt·音视频
薛一半8 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾8 小时前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O29 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage9 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
顾菁寒9 小时前
WEB第二次作业
前端·css·html