三位置法实现无缝滚动轮播图
三位置:候场位置、登场位置、退场位置
缺点:虽然可以实现无缝轮播图,但是有一个缺点就是当鼠标在小圆点中来回滑动时,会显示出现空白现象,所以一般实现滚动轮播图都实现我上篇文章的滚动轮播图的方法
注意:举例中所引入的jquery包可以去我上传的资料中下载,里面有相关包及手册,我使用的jquery的包版本是jquery-1.12.3.min.js
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
.carousel {
width: 560px;
height: 300px;
margin: 50px auto;
border: 5px solid red;
position: relative;
overflow: hidden;
}
/*候场位置: left: 560*/
.carousel .unit li {
position: absolute;
left: 560px;
width: 560px;
height: 300px;
}
/*登场位置: left: 0*/
.carousel .unit li:first-child {
left: 0px;
}
/*退场位置*/
.btns a {
position: absolute;
width: 30px;
height: 60px;
top: 50%;
margin-top: -30px;
background-color: rgba(0, 0, 0, .5);
color: #fff;
font-size: 20px;
line-height: 60px;
text-align: center;
}
.btns a:first-child {
left: 10px;
}
.btns a:last-child {
right: 10px;
}
.circles {
position: absolute;
width: 140px;
height: 20px;
left: 50%;
margin-left: -70px;
bottom: 30px;
}
.circles ol {
width: 150px;
}
.circles ol li {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
background-color: orange;
border-radius: 50%;
}
.circles ol li.cur {
background-color: yellow;
}
</style>
</head>
<body>
<div class="carousel" id="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)" id="leftBtn"><</a>
<a href="javascript:void(0)" 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 $imgs = $("#unit li");
var $circles = $("#circles ol li");
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var length = $circles.length;
// 定义信号量
var idx = 0;
// 右按钮事件
$rightBtn.click(function() {
// 防流氓
if ($imgs.is(":animated")) {
return;
}
// 当前图片退场
$imgs.eq(idx).animate({"left": -560}, 600);
// 信号量改变
idx++;
// 边界判定
if (idx > length - 1) {
idx = 0;
}
// 下一张图片先去到候场位置再动画进入
$imgs.eq(idx).css("left", 560).animate({"left": 0}, 600);
// 小圆点事件
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
})
// 左按钮事件
$leftBtn.click(function() {
// 防流氓
if ($imgs.is(":animated")) {
return;
}
// 当前图片退场
$imgs.eq(idx).animate({"left": 560}, 600);
// 改变信号量
idx--;
// 边界判定
if (idx < 0) {
idx = length - 1;
}
// 下一张图片先瞬移到left: -560位置然后再登场
$imgs.eq(idx).css("left", -560).animate({"left": 0}, 600);
// 小圆点加cur
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
})
// 小圆点事件
$circles.mouseenter(function() {
// 定义一个变量用于保存触发事件的序号,与当前信号量做比较
var i = $(this).index();
// console.log(i);
if (i > idx) {
// 此时等价于右按钮事件,图片应该从右边进入
// 当前图片退场
$imgs.eq(idx).stop(true).animate({"left": -560}, 600);
// 信号量改变
idx = i;
// 新图从候场位置left: 560的位置登场
$imgs.eq(idx).stop(true).css("left", 560).animate({"left": 0}, 600);
} else if (i < idx) {
// 等价于左按钮事件, 图片应该从左边进入
// 当前图片退场
$imgs.eq(idx).stop(true).animate({"left": 560}, 600);
// 信号量改变
idx = i;
// 新图从候场位置left: -560的位置登场
$imgs.eq(idx).stop(true).css("left", -560).animate({"left": 0}, 600);
}
// 小圆点加cur
$(this).addClass("cur").siblings().removeClass("cur");
})
</script>
</body>
</html>
使用事项:
1、图片更换自己所需要的图片
2、注意引入jquery包的路径和版本问题。
3、相比我写的两篇关于滚动轮播图的文章,发现各自的缺点。(滚动轮播图缺点:当鼠标从第一个小圆点移入最后一个小圆点的过程中,会显示经过的图片,这个可以看淘宝这个大网站也是使用的这个方法。无缝轮播图的缺点:虽然解决了滚动轮播图的缺点,但是引入一个更大的问题,就是当鼠标在小圆点上来回移动,会发现空白现象,所以相比较淘宝这种大网站,我更推荐你们使用我上篇文章中的滚动轮播图这个案例)
4、你们遇到问题和建议,欢迎随时留言,如果觉得不错的同学,可以关注下,每天都会写各种知识点和案例供大家学习,谢谢。