文：高老师
首先创建Html文件，创建基本布局包括轮播图包裹层，5张图轮播图，左右点击按钮，并导入jq文件以备后用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jq.js"></script>
<script>
</script>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
在head标签中创建<style>标签并编写如下代码，设置外层，内层以及图片基本样式。
*{margin: 0;padding: 0;}
.outer{
height: 340px; width: 1000px; margin: 200px auto;position: relative;
}
.inner{
transform-style:preserve-3d; perspective: 500px; width: 100px; height: 100px; position: absolute;
left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;
}
img{
position: absolute; width: 790px; height: 340px; left: 50%; top: 50%;
margin-left: -395px; margin-top: -170px; transition: all 0.5s; filter: blur(5px);
}
在css中创建now left1 right1三个类，分别代表最前面图片，左边图片和右边图片
/* 最前面图片*/
.inner img { filter: blur(0px); transform: translate3d(0px, 0px, -400px); }
.inner .now { filter: blur(0px); transform: translate3d(0px, 0px, 0px); }
.inner .left1 { transform: translate3d(-300px, 0px, -200px); }
.inner .right1 { transform: translate3d(300px, 0px, -200px); }
并修改html如下：为第一张添加当前显示，为第二张添加右面显示，为倒数第一张添加左面显示，其余图片为上述默认样式居于显示图片后面。
<div class="inner">
</div>
设置左右按钮样式和hover效果，两个按钮为整个轮播图的遮罩层
.left,.right{
width: 50%;
height: 100%;
float: left;
z-index: 999;
position: relative;
}
.left:hover,.right:hover{
background: rgba(0,0,0,0.2);
}
编写js代码：设置nowIndex为0即为当前显示图片索引，为左右按钮添加事件，左侧按钮点击索引减一，右侧按钮点击索引加一并创建move函数实现旋转木马的移动，在木函数中首先清空图片样式，并根据nowindex分别计算出上一张下一张的索引值，通过三个索引值设置 now right1 left1的样式。
$(function () {
var nowIndex = 0;
var arrImg = $("img")
$(".right").click(function () {
nowIndex = ++nowIndex > arrImg.length - 1 ? 0 : nowIndex;
move()
});
$(".left").click(function () {
nowIndex = --nowIndex < 0 ? arrImg.length - 1 : nowIndex;
move()
});
function move() {
$("img").attr("class","");
var left1 = nowIndex - 1 < 0 ? arrImg.length - 1 : nowIndex - 1;
var right1 = nowIndex + 1 > arrImg.length - 1 ? 0 : nowIndex + 1;
$("img").eq(nowIndex).attr("class", "now");
$("img").eq(left1).attr("class", "left1");
$("img").eq(right1).attr("class", "right1");
}
})
这样就实现了旋转木马效果。
效果展示.gif
图片来自网络
文章原创，未经许可禁止转载。
