今天来说说旋转木马的效果，这个好像平时用的不多，比如一些视频类的网站才有用的，因为效果看起来还是蛮炫酷的😏，效果图如下：（我这里截图，我把浏览器显示效果缩小了一下，为了看清楚父盒子的范围，所以截图中加了一个背景色，实际使用中是不要加背景色的）
旋转木马效果图
思路分析：越往最下层图片的模糊度越低，高度一层比一层低，点左边最低层的一张图片是第一张图片，那么右边最底层的就是最后一张，那么点击左边箭头，第一张图片移出，右边最后一张移动到左边最后一张的位置部位，反之点击右边箭头的道理是一样的。
这里要运用到数组的一些方法：push（），shift（），unShift（），pop（）
注意：两边箭头的层级是最高级，如果被图片盖住了，那么就无法点击了，点击了箭头，就让图片的位置交换！
布局：
布局
*{
margin:0;
padding:0;
}
img{
vertical-align:top;
}
#slider{
width:1200px;
height:700px;
margin:100px auto;
position:relative;
background-color:red;
}
#slider_top{
}
#slider_topli{
list-style:none;
/*width: 800px;*/
/*height: 577px;*/
position:absolute;
/*left: 200px;*/
top:0;
}
#slider_topli img{
width:100%;
height:100%;
}
#slider_controll{
position:relative;
opacity:0;
z-index:99;
top:30%;
}
.slider_next,.slider_pre{
position:absolute;
/*left: 0;*/
width:76px;
height:112px;
margin-top:35px;
}
.slider_pre{
background:url("images/prev.png")0 0no-repeat;
left:5px;
}
.slider_next{
background:url("images/next.png")0 0no-repeat;
right:5px;
}
JS部分：
1。先优先实现箭头的效果，先找对象，然后当鼠标进入的时候就显示箭头，鼠标离开的时候就让箭头隐藏
1
2.对图片的位置大小封装到一个json中，实现定位
3.设置每一个li的层级，封装一个函数方法来拆解json数组
2
4.最后监听鼠标的事件，按照思路中我们提到的，来实现图片的移位问题。
3
github地址：github.com/guoshilin/-JavaScript-
网友评论