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

相关推荐
刚刚好ā15 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
Domain-zhuo3 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花3 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
码农六六4 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保4 小时前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~4 小时前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
建群新人小猿5 小时前
会员等级经验问题
android·开发语言·前端·javascript·php