JS效果:旋转木马

xiaoxiao2021-02-28  10

效果

个人博客新地址:→点我♪(^∀^●)ノ

实现原理

主要是图片的位置摆放问题,利用z-index,opacity,top,left。

核心代码为编写的位置JSON:

javascript var json = [ { // 0 width:400, top:70, left:50, opacity:0.2, zIndex:2 }, { // 1 width:600, top:120, left:0, opacity:0.8, zIndex:3 }, { // 2 width:800, top:100, left:200, opacity:1, zIndex:4 }, { // 3 width:600, top:120, left:600, opacity:0.8, zIndex:3 }, { //4 width:400, top:70, left:750, opacity:0.2, zIndex:2 } ];

布局

<div class="wrap"> <div class="slider"> <ul> <li><img src="images/rotate/slidepic1.jpg" /></li> <li><img src="images/rotate/slidepic2.jpg" /></li> <li><img src="images/rotate/slidepic3.jpg" /></li> <li><img src="images/rotate/slidepic4.jpg" /></li> <li><img src="images/rotate/slidepic5.jpg" /></li> </ul> <div class="arrow"> <div class="prev" id="prev"></div> <div class="next" id='next'></div> </div> </div> </div>

Css代码:

<style> *{ margin:0; padding:0; } .wrap{ width: 1200px; margin:10px auto; } .slider{ height: 500px; position: relative; } .slider li{ list-style: none; position: absolute; left:200px; top:0; } .slider li img{ width: 100%; display: block; } .arrow{ opacity: 1; } .prev,.next{ width: 76px; height: 112px; position: absolute; top:50%; margin-top:-56px; background: url(images/rotate/prev.png) no-repeat; z-index:99; } .next{ right:0; background: url(images/rotate/next.png) no-repeat; } .prev{ left:0; } </style>

JS实现

<script> var json = [ { // 0 width:400, top:70, left:50, opacity:0.2, zIndex:2 }, { // 1 width:600, top:120, left:0, opacity:0.8, zIndex:3 }, { // 2 width:800, top:100, left:200, opacity:1, zIndex:4 }, { // 3 width:600, top:120, left:600, opacity:0.8, zIndex:3 }, { //4 width:400, top:70, left:750, opacity:0.2, zIndex:2 } ]; //根据json的内容把图片缓动到相应位置,同时缓动 var liArr = document.getElementsByTagName('li'); var next = document.getElementById('next'); var prev = document.getElementById('prev'); function move(){ for(var i=0;i<liArr.length;i++){ animation(liArr[i],json[i]); } } move() next.onclick = function(){ var last = json.pop(); json.unshift(last); move() } prev.onclick = function(){ var first = json.shift(); json.push(first); move(); } </script>
转载请注明原文地址: https://www.6miu.com/read-2350252.html

最新回复(0)