文:高老师
首先创建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">
![](banner1.jpg)
![](banner2.jpg)
![](banner3.jpg)
![](banner4.jpg)
![](banner5.jpg)
</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">
![](banner1.jpg)
![](banner2.jpg)
![](banner3.jpg)
![](banner4.jpg)
![](banner5.jpg)
</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");
}
})
这样就实现了旋转木马效果。
图片来自网络
文章原创,未经许可禁止转载。