JQ实现旋转木马
最近公司要做一个官网，可能会用到旋转木马的功能，自己并不喜欢用网上那些插件去实现，想自己写一个，在网上搜了搜大神们的实现方法，发现有部分是封装成插件，代码老长一段。还有一些实现方法太过于复杂。所以自己动手用简单的方法实现了下，大神们勿喷。
效果图
效果图
html代码
<div class="warp">
<div class="box">
< img class="pic1" src="./img/pic1.jpg" alt="pic">
< img class="pic2" src="./img/pic2.jpg" alt="pic">
< img class="pic3" src="./img/pic3.jpg" alt="pic">
< img class="pic4" src="./img/pic4.jpg" alt="pic">
< img class="pic5" src="./img/pic5.jpg" alt="pic">
< img class="pic6" src="./img/pic6.jpg" alt="pic">
< img class="pic7" src="./img/pic7.jpg" alt="pic">
< img class="pic8" src="./img/pic8.jpg" alt="pic">
< img class="pic9" src="./img/pic9.jpg" alt="pic">
</div>
</div>
<div class="btn">
<div class="pre tt">向前</div>
<div class="next tt">向后</div>
</div>
css 代码
css 代码未做优化，实现时可以将代码量减小
body,html {
background-color: #000000;
}
.warp {
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 400px;
height: 250px;
display: flex;
justify-content: center;
position: relative;
}
img {
width: 400px;
height: 250px;
position: absolute;
-webkit-box-reflect: below 10px -webkit-linear-gradient(transparent,transparent 70%,rgba(0,0,0,.5));
}
.pic1 {
top: -200px;
left: -400px;
z-index: 96;
opacity: 0.2;
}
.pic2 {
top: -150px;
left: -500px;
z-index: 97;
opacity: 0.4;
}
.pic3 {
top: -100px;
left: -400px;
z-index: 98;
opacity: 0.6;
}
.pic4 {
top: -50px;
left: -250px;
z-index: 99;
opacity: 0.8;
}
.pic5 {
top: 0px;
left: 0px;
z-index: 100;
opacity: 1;
}
.pic6 {
top: -50px;
left: 250px;
z-index: 99;
opacity: 0.8;
}
.pic7 {
top: -100px;
left: 400px;
z-index: 98;
opacity: 0.6;
}
.pic8 {
top: -150px;
left: 500px;
z-index: 97;
opacity: 0.4;
}
.pic9 {
top: -200px;
left: 400px;
z-index: 96;
opacity: 0.2;
}
.btn {
width: 300px;
margin: 0 auto;
margin-top: 100px;
line-height: 30px;
text-align: center;
}
.tt {
width: 60px;
height: 30px;
background-color: #048666;
border-radius: 3px;
color: #fff;
cursor: pointer;
}
.pre {
float: left;
}
.next {
float: right;
}
jq 代码
实现原理比较简单， 创建一个数组， 将每张图片的位置，比如（top， left， z-index， opacity）等存进去，然后每次点击按钮的时候，改变数组中值的位置，就可以实现效果。
$(document).ready(function () {
function Lunbo () {
this.class = ['.pic1', '.pic2', '.pic3', '.pic4', '.pic5', '.pic6', '.pic7', '.pic8', '.pic9',] //每个img的class，也可以用id
this.pic = [ //这里存下每张图片的位置等信息
{top: '-200px', left: '-400px', zIndex: '96', opacity: 0.2},
{top: '-150px', left: '-500px', zIndex: '97', opacity: 0.4},
{top: '-100px', left: '-400px', zIndex: '98', opacity: 0.6},
{top: '-50px', left: '-250px', zIndex: '99', opacity: 0.8},
{top: '0px', left: '0px', zIndex: '100', opacity: 1},
{top: '-50px', left: '250px', zIndex: '99', opacity: 0.8},
{top: '-100px', left: '400px', zIndex: '98', opacity: 0.6},
{top: '-150px', left: '500px', zIndex: '97', opacity: 0.4},
{top: '-200px', left: '400px', zIndex: '96', opacity: 0.2},
]
}
Lunbo.prototype = {
//点击向前
ToPer: function () {
let _this = this
$('.pre').on('click', function () { //监听pre向前按钮的点击事件
let frist = _this.pic.shift() //将数组的第一个取出来
_this.pic.push(frist) //将数组的第一个插入到数组的最后
_this.movePic()
})
},
//点击向后
ToNext: function () {
let _this = this
$('.next').on('click', function () { //监听next向后按钮的点击事件
let last = _this.pic.pop() //将数组的最后一个取出来
_this.pic.unshift(last) //将数组的最后一个插入到数组的最前
_this.movePic()
})
},
//移动图片
movePic: function () {
let _this = this
$.each(_this.class, function (i, n) { //遍历 this.class 这个数组， i 是数组索引， n是每张图片的class
$(n).animate(_this.pic[i]) //使用animate方法将每张图片与存好的位置数组中的每项相对应
})
},
//轮播
TimeChange: function () {
let _this = this
let setTime = setInterval(function () {
let last = _this.pic.pop()
_this.pic.unshift(last)
_this.movePic()
}, 1000)
$('.pre').on('click', function () { //点击的时候取消自动轮播
clearInterval(setTime)
})
$('.next').on('click', function () { //点击的时候取消自动轮播
clearInterval(setTime)
})
},
//调用
do: function () {
this.ToPer()
this.ToNext()
this.TimeChange()
}
}
let lunbo = new Lunbo()
lunbo.do()
})
原理很简单，实现方法也不难，所有轮播效果其实都可以使用这个原理，并不需要什么无限滚动，不需要去移动每张图片，也不需要去计算什么太多距离，位置等。
