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

相关推荐
爱分享的飘哥1 分钟前
【V6.0 - 听觉篇】当AI学会“听”:用声音特征捕捉视频的“情绪爽点”
人工智能·音视频
AA-代码批发V哥44 分钟前
CSS之布局详解指南
css
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
菜包eo1 小时前
二维码驱动的独立站视频集成方案
网络·python·音视频
前端风云志1 小时前
TypeScript结构化类型初探
javascript
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景3 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再3 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref