CSS3动画效果结合JS的轮播
2024-09-04 01:18:46
<style> *{;} #big{ width: 100%; height: 280px; } .carousel-wrapper{ width: 500px; height: 280px; margin:100px auto; perspective:600px; } #carousel{ width: 500px; height: 280px; list-style-type:none; position:relative; } #carousel li{ position:absolute; left:; top:; transition: all 1s ease 0s; cursor: pointer; } .king{ z-index:; } .left1{ transform:rotateY(30deg) translateZ(-150px) translateX(-100px); z-index:; } .left2{ transform:rotateY(40deg) translateZ(-300px) translateX(-200px); z-index:; } .right1{ transform:rotateY(-30deg) translateZ(-150px) translateX(100px); z-index:; } .right2{ transform:rotateY(-40deg) translateZ(-300px) translateX(200px); z-index:; } .bench-warmer{ transform:translateZ(-200px); opacity:; } .carousel-wrapper span{ width:60px; height: 60px; line-height: 60px; text-align: center; font-size: 50px; color:white; position:absolute; left:-320px; top:50%; /*margin-top:-30px;*/ transform:translateY(-50%); background-color: rgba(0, 0, 255, .5); z-index:; cursor:pointer; } .carousel-wrapper #right-btn{ right:-320px; left:auto; } </style>
<script> window.onload=function(){ var left_btn =document.getElementById("left-btn"); var right_btn=document.getElementById("right-btn"); var carousel =document.getElementById("carousel"); var lis =carousel.getElementsByTagName("li"); var lock =false; //将类名保存在数组内 var classes=["left2","left1","king","right1","right2","bench-warmer","bench-warmer","bench-warmer","bench-warmer"]; right_btn.onclick=function(){ if(lock==false){ //设置定时器 lock=true; setTimeout(function(){ lock=false; },1000 ) classes.unshift(classes.pop()); //得到所有的类名 for(var i=0;i<classes.length;i++){ lis[i].className=classes[i]; } } } left_btn.onclick=function(){ if(lock==false){ lock=true; setTimeout(function(){ lock=false; },1000) //增删数组 classes.push(classes.shift()); // 遍历修改完的数组 for(var i=0;i<classes.length;i++){ lis[i].className=classes[i]; } } } //设置一个定时器自动增删数组 var time=null; //获取到最大的Div作为事件源 var big=document.getElementById("big") function start(){ time=setInterval(function(){ classes.unshift(classes.pop()); //得到所有的类名 for(var i=0;i<classes.length;i++){ lis[i].className=classes[i]; } },2000); } start() big.onmouseover=function(){ clearInterval(time); } big.onmouseout=function(){ //当鼠标移除后再启动定时器 start() } } </script>
<div id="big"> <div class="carousel-wrapper"> <ul id="carousel"> <li class="left2"><img src="data:images/50/1.jpg" alt=""></li> <li class="left1"><img src="data:images/50/2.jpg" alt=""></li> <li class="king"><img src="data:images/50/3.jpg" alt=""></li> <li class="right1"><img src="data:images/50/4.jpg" alt=""></li> <li class="right2"><img src="data:images/50/5.jpg" alt=""></li> <li class="bench-warmer"><img src="data:images/50/6.jpg" alt=""></li> <li class="bench-warmer"><img src="data:images/50/7.jpg" alt=""></li> <li class="bench-warmer"><img src="data:images/50/8.jpg" alt=""></li> <li class="bench-warmer"><img src="data:images/50/9.jpg" alt=""></li> </ul> <span id="left-btn"><</span> <span id="right-btn">></span> </div> </div>
最新文章
- Debian8.3如何设置默认不启动Gnome
- 树型hierarchyid类型
- 读javascript高级程序设计04-canvas
- codeforce 626E(二分)
- devexpress中应用于girdviw中HtmlDataCellPrepared事件与CellEditorInitialize事件的区别
- c#怎么把byte转化成int
- iOS 代码分类
- [CSS3] Text ellipsis
- HTML系列(三):文字设置
- HDOJ 1253 胜利大逃亡(bfs)
- 单例模式——Java EE设计模式解析与应用
- Django ORM创建数据库
- qs.stringify和JSON.stringify的使用和区别
- log4cplus在VS项目中的使用
- 自定义redis连接池(字典操作)
- SignalR的简单实现消息广播
- squid代理http和https方式上网的操作记录
- ZooKeeper 典型的应用场景——及编程实现
- 使用ES6的reduce函数,根据key去重
- 使用jquery的ajax提交文件上传
热门文章
- boost.numpy编译报错:undefined reference to `PyInt_FromLong&#39; libboost_numpy.so: undefined reference to `PyCObject_AsVoidPtr&#39;
- mxnet实战系列(一)入门与跑mnist数据集
- LoadRunner ---协议分析
- 2016 China-Final-F题 ——(SA+二分)
- 循序渐进Python3(八) -- 0 -- 初识socket
- CSS overflow 属性
- frame busting
- apache限制同一ip大并发访问及下载
- EL标签使用
- 预习笔记 多态 --S2 4.3