火车轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
.carousel {
width: 560px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
position: relative;
}
/*火车法所有图片必须并排显示 ul看成火车他带着所有的图片一起移动*/
.carousel .unit {
width: 9000px;
height: 300px;
position: absolute;
/*默认显示第一张*/
left: 0px;
top: 0px;
}
.carousel .unit li {
float: left;
width: 560px;
height: 300px;
}
.carousel .btns a {
position: absolute;
width: 30px;
height: 60px;
top: 50%;
margin-top: -30px;
background-color: rgba(0,0,0,.5);
color: #fff;
font-size: 30px;
text-align: center;
line-height: 60px;
}
.carousel .btns a.leftBtn {
left: 10px;
}
.carousel .btns a.rightBtn {
right: 10px;
}
.carousel .circles {
position: absolute;
width: 140px;
height: 20px;
left: 50%;
margin-left: -70px;
bottom: 10px;
overflow: hidden;
}
.carousel .circles ol {
width: 200px;
}
.carousel .circles ol li {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
background-color: #eee;
}
.carousel .circles ol li.cur {
background-color: yellow;
}

</style>
</head>
<body>
<div class="carousel">
<ul class="unit" id="unit">
<li><img src="images/0.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<div class="btns">
<a href="javascript:void(0);" class="leftBtn" id="leftBtn"><</a>
<a href="javascript:void(0);" class="rightBtn" id="rightBtn">></a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取元素
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $circles = $("#circles ol li");
// 数量
var amount = $circles.length;
// 火车
var $unit = $("#unit");

// 信号量表示出现哪一个图片 0 1 2 3 4
var idx = 0;

// 克隆.clone()第一张图片追加到最后appendTo()

$unit.children("li:first").clone().appendTo($unit);

// 右按钮点击事件
// 拉动策略先拉动再判断
$rightBtn.click(function() {
// 防流氓
if($unit.is(":animated")) {
return;
}
// 信号量改变 0 1 2 3 4 5(对应猫腻图)
idx ++;
// 拉动图片
$unit.animate({
"left": -560 * idx
}, 600, function() {
// 回调函数进行idx 判断
if(idx > amount - 1) {
idx = 0;
// 用户已经看到了0号图（left停留在猫腻left = -560 * 5）
// left应该瞬间变为0 用户这时看到真图
$unit.css("left", 0);
}
});
// idx 0-4 有600ms时间 idx = 5 显示第一个小圆点
var i = idx <= amount - 1 ? idx : 0;
$circles.eq(i).addClass("cur").siblings().removeClass("cur");
});

// 左按钮点击
// 策略先验证 0 1 2 4 在拉动
$leftBtn.click(function() {
// 防流氓
if(!$unit.is(":animated")) {
// 信号量改变
idx --;
if(idx < 0) {
idx = amount - 1;
// 0-4图片平滑过渡
// 让left 瞬间移动到left = -560 * 5
// 由猫腻图平滑过渡4
$unit.css("left", -560 * amount);
}
// 后拉动
$unit.animate({
"left": -560 * idx
}, 600);
// 小圆点改变
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
});

// 小圆点鼠标进入事件
$circles.mouseenter(function() {
// 防流氓立即触发stop(true)
// 信号量改变
idx = $(this).index();
// 拉动
$unit.animate({
"left": -560 * idx
}, 600);
// 小圆点改变
$(this).addClass("cur").siblings().removeClass("cur");
});
</script>
</body>
</html>

猜你喜欢