首页 > 代码库 > 展示图 轮播
展示图 轮播
1 <body> 2 <div id="wrap"> 3 <img src="img/0.png"/> 4 <img src="img/1.png"/> 5 <img src="img/2.png"/> 6 <img src="img/3.png"/> 7 <img src="img/4.png"/> 8 <img src="img/5.png"/> 9 <img src="img/6.png"/>10 </div>11 12 </body>
1 <style> 2 body{ 3 margin: 0; 4 background-color: #999; 5 } 6 #wrap{ 7 height: 500px; 8 background: url(img/bg.png) no-repeat center; 9 background-size: 1800px 500px;10 position: relative;11 transform-style: preserve-3d;12 perspective: 800px;13 margin-top: 100px;14 }15 img{16 border: none;17 vertical-align: top;18 }19 #wrap img{20 width: 300px;21 height: 200px;22 position: absolute;23 left: 50%;24 top: 50%;25 margin-left: -150px; /* 居中*/26 margin-top: -100px;27 transition: 0.7s ease-in-out;28 }29 </style>
<script type="text/javascript"> window.onload = function() { var imgs = document.getElementsByTagName("img"); var target = ""; var n = 6; //开始值 var onoff = true; //解决快速多点 乱跑问题 setTimeout(function(){ tab(n) },200) // 3 4 5 6 0 1 2 function tab(n) { for (var i = 0; i < 3; i++) { var left = n-1-i; if (left<0) { // 重要步骤一 left = left +7; } imgs[left].style.transform = "translateX("+(-150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(30deg)"; //往右边移动 150 景深 2边 离中心越远 越 小 var right = n+1+i; if (right>6) {// 重要步骤一 right = right -7; } imgs[right].style.transform = "translateX("+(150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(-30deg)"; } imgs[n].style.transform = "translateZ(300px)"; } for (var i = 0; i < imgs.length; i++) { imgs[i].index = i; imgs[i].onclick = function() { if(!onoff){ return; } onoff = false; target = this.index; //alert(this.index) //gonext(); //是否走下一张最近 还是上一张最近 当前值 》点击值 相减 》= 3 if(target > n) // 点击 6 当前 2 { if(target-n <= 3) { gonext() //往上走 }else{ goprev(); //往下走 } }else{// 点击 0 当前 6 if(n -target >=4){ gonext() //往上走 }else{ goprev(); //往下走 } } } } function gonext() //图片切换 { n++ // +1 if(n>6){ //判断是否大于6 回归 0 n = 0; } tab(n); //顺序不能乱 if(n == target){ //点击值 == 已经到达的值则退出 运动完成 onoff = true; return; } setTimeout(function(){ gonext(); },700) } function goprev() //图片切换 { n-- // +1 if(n<0){ //判断是否大于6 回归 0 n =6; } tab(n); //顺序不能乱 if(n == target){ //点击值 == 已经到达的值则退出 onoff = true; return; } setTimeout(function(){ goprev(); },700) } }</script>
展示图 轮播
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。