三位置法图片轮播图

<!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;
}
/*三位置法舞台left=0 候场left=560 退场left = -560*/
.carousel .imgs li {
position: absolute;
/*默认所有图片都在候场位置*/
left: 560px;
top: 0px;
width: 560px;
height: 300px;
}
/*默认第一张图出现*/
.carousel .imgs li:first-child {
left: 0px;
}
.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="imgs" id="imgs">
<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 $imgs = $("#imgs li");
// 数量
var amount = $circles.length;
// 信号量
var idx = 0;
// 定时器相当于自动执行鼠标右键事件将鼠标右击事件写成函数
var timer = setInterval(rightBtnFun,1000);
// 鼠标进入图片定时器停止
$circles.mouseenter(function(){
clearInterval(timer);
})
// 鼠标离开定时器继续
$circles.mouseleave(function(){
// 设表先关
clearInterval(timer);
// 重新开始定时器
timer = setInterval(rightBtnFun,1000);
})
// 右键点击事件
$rightBtn.click(rightBtnFun);
function rightBtnFun(){
// 防流氓
if($imgs.is(":animated")){
return;
}
// 老图消失
$imgs.eq(idx).animate({"left":-560},500)
// 新图入场
// 信号量改变
idx ++ ;
// 验证信号量
if(idx>amount-1){
idx=0;
}
// 新图入场前瞬移到候场位置
$imgs.eq(idx).css("left",560);
// 新图入场
$imgs.eq(idx).animate({"left":0},500);
// 小圆点改变
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
// 左键点击事件
$leftBtn.click(function(){
// 防流氓
if(!$imgs.is(":animated")){
// 老图退场退场位置去了右面
$imgs.eq(idx).animate({"left":560},500)
// 信号量改变
idx --;
// 信号量判断
if(idx<0){
idx=amount-1;
}
// 新图进场前瞬移新图进场
$imgs.eq(idx).css("left",-560).animate({"left":0},500)
// 对应小雨点改变样式
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
})
// 小圆点鼠标进入事件
$circles.mouseenter(function(){
// 判断事件小圆点在哪边
var i = $(this).index();
// 如果事件小圆点大于当前图片位置图片从右侧进入相当于鼠标右击事件
if(i>idx){
// 老图退场
$imgs.eq(idx).animate({"left":-560},500)
// 新图进场前瞬移
idx = i;
$imgs.eq(idx).css("left",560)
// 新图进场
$imgs.eq(idx).stop(true,true).animate({"left":0},500)
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
// 如果事件小圆点小于当前图片位置图片从右侧进入相当于鼠标右击事件
if(i<idx){
// 老图退场
$imgs.eq(idx).animate({"left":560},500)
// 新图进场前瞬移
idx = i;
$imgs.eq(idx).css("left",-560)
// 新图进场防流氓
$imgs.eq(idx).stop(true,true).animate({"left":0},500)
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
})
</script>
</body>
</html>

三位置法图片轮播图

猜你喜欢