用jQuery实现旋转木马效果的轮播图及解决按钮的闪烁问题
作者：互联网
总效果：
代码主结构：
<body>
<div class="slide-warp">
<ul class="list">
<li><a href="###"><img src="images/slidepic5.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic8.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic9.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic6.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic2.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic4.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic7.jpg" alt=""></a></li>
</ul>
<div class="arrow">
<i class="left-btn"></i>
<i class="right-btn"></i>
</div>
</div>
</body>
解决按钮闪烁问题：
问题代码:
鼠标在 li 上按钮不会闪烁，但当鼠标移动到按钮上时，按钮不停闪烁
// 3. 鼠标移入 .slide-warp大盒子的时候，要显示左右按钮 ,离开大盒子，要隐藏左右按钮
$(".slide-warp>ul>li").mouseenter(function () {
arrow.show();
}).mouseleave(function () {
arrow.hide();
});
解决：
在之前代码的前提下，当鼠标移动到按钮上时，它已经不满足出发 li 的鼠标事件了，此时鼠标进入的时 .arrow 的 div 里。所以把对象换成 .slide-warp 大盒子就OK 啦（利用到冒泡）
$(".slide-warp").mouseenter(function () {
arrow.show();
}).mouseleave(function () {
arrow.hide();
});
总代码：
思路：
- 要记得把图片都脱离文档里才可以移动；
- 把每张图片的位置效果(css)放在一个数组pos里，到时候通过点击左右按钮来改变数组的顺序，然后再把图片放到对应的位置即可；
- 要先了解数组的删除、追加方法：
点右按钮（效果）：图片左移——删除 pos 数组第一个并追加到最后；
点做按钮 ： 图片右移——删除数组最后一个并添加到数组第一个的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马</title>
<style>
* {
padding: 0;
margin: 0;
}
.slide-warp { //这个可以不脱离文档流，自己随意
position: absolute;
top: 50px;
left: 13%;
width: 1000px;
height: 300px;
margin: 0 auto;
box-sizing: border-box;
/*border: 1px solid #ddd;*/
overflow: hidden;
}
ul {
list-style: none;
position: relative;
left: 210px;
top: 0;
}
ul li{
position: absolute;
left: 0;
top: 0;
border-radius: 15px;
}
li img{
width: 100%;
height: 100%;
border-radius: 15px;
}
.arrow{
display: none;
width: 100%;
}
.left-btn {
background: url("images/left-btn.png") no-repeat;
width: 40px;
height: 50px;
position: absolute;
top: 40%;
left:0;
cursor: pointer;
z-index: 100;
}
.right-btn {
background: url("images/right-btn.png") no-repeat right;
width: 40px;
height: 50px;
position: absolute;
top: 40%;
right: 0;
cursor: pointer;
z-index: 100;
}
</style>
</head>
<script src="../../jQuery版本/jquery-1.12.4.min.js"></script>
<script>
$(function () {
//把每张图片的位置效果(css)放在一个数组pos里，到时候通过点击左右按钮来改变数组的顺序，然后再把图片放到对应的位置即可
var pos = [
{//1
width: 504,
height: 261,
top:20,
left:-315,
opacity: 0,
z: 1
},
{//2
width: 504,
height: 261,
top:20,
left:-210,
opacity: 0.8,
z: 2
},
{//3
width: 580,
height: 300,
top:0,
left:0,
opacity: 1,
z: 3
},
{//4
width: 504,
height: 261,
top:20,
left:286,
opacity: 0.8,
z: 2
},
{//5
width: 504,
height: 261,
top:20,
left:391,
opacity: 0,
z: 1
},
{//6
width: 504,
height: 261,
top:20,
left:496,
opacity: 0,
z: 1
},
{//7
width: 504,
height: 261,
top:20,
left:690,
opacity: 0,
z: 1
}
];
// 获得要操作的对象
var lis = $(".slide-warp>ul>li");
var arrow=$(".arrow");
var flag = true;
// 让每个li标签走到指定的位置
assign();
function assign() {
$.each(pos, function (index, ele) {
// index是索引号 ele是数组中的对象
lis.eq(index).css("zIndex", ele.z).stop().animate(ele, 500, function () {
flag = true;
});
});
}
// 鼠标移入大盒子的时候，要显示左右按钮 ,离开大盒子，要隐藏左右按钮
//用 $(".slide-warp>ul>li,.arrow")===加上.arrow的作用是防止按钮图片闪烁
// 或者用：$(".slide-warp")
$(".slide-warp").mouseenter(function () {
arrow.show();
}).mouseleave(function () {
arrow.hide();
});
// 给右侧按钮注册事件
$(".left-btn").on("click", function () {
if (flag) {
flag = false;
pos.push(pos.shift());
// 数组现在是重新排列的了，再让li标签根据新的数组，重新生成自己的样式
assign();
}
});
// 给左侧按钮注册事件
$(".right-btn").on("click", function () {
if (flag) {
flag = false;
pos.unshift(pos.pop());
assign();
}
});
});
</script>
<body>
<div class="slide-warp">
<ul class="list">
<li><a href="###"><img src="images/slidepic5.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic8.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic9.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic6.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic2.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic4.jpg" alt=""></a></li>
<li><a href="###"><img src="images/slidepic7.jpg" alt=""></a></li>
</ul>
<div class="arrow">
<i class="left-btn"></i>
<i class="right-btn"></i>
</div>
</div>
</body>
</html>
标签：jQuery,function,轮播,top,width,图及,arrow,按钮,left 来源： https://blog.csdn.net/weixin_40758850/article/details/89644235