- 该插件由轮播图片、向前向后按钮及底部分页器3部分组成
- 首先，搭建页面
dom结构，href="javascript:void(0)表示a标签不跳转，保留样式，不做任何操作
<div class="carousel">
<!-- 轮播图片 -->
<ul class="items">
<li>
<a href="javascript:void(0)">
<img src="imgs/26.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="imgs/25.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="imgs/24.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="imgs/23.jpg" alt="">
</a>
</li>
</ul>
<!-- 向前向后按钮 -->
<a href="javascript:void(0)" class="pre"><</a>
<a href="javascript:void(0)" class="next">></a>
<!-- 分页器 -->
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
- 再看下样式的写法，值得注意的是2个居中写法
<style>
/* reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.carousel {
position: relative;
width: 480px;
height: 360px;
margin: 20px auto;
overflow: hidden;
}
.pre,
.next {
/* 相对.carousel垂直方向的50%，再减去自身高度一半，实现上下居中 */
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 30px;
opacity: .8;
}
.pre:hover,
.next:hover {
font-size: 60px;
}
.pre {
left: 10px;
}
.next {
right: 10px;
}
.bullet {
/* 相对.carousel水平方向的50%，再使用translate让自己向左平移自身宽度的50%，实现水平居中 */
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%);
}
.bullet li {
display: inline-block;
width: 16px;
height: 4px;
background: #fff;
cursor: pointer;
}
.bullet li.active {
background: #666;
}
</style>
- 最后看逻辑部分，大致功能有：向前向后按钮的点击操作（显示下一张和上一张），底部分页器的点击操作（点击分页器显示与之下标对应的图片），自动轮播的功能
<script>
var $pre = $(".pre"),
$next = $(".next"),
$bullet = $(".bullet"),
$items = $(".items").children(),
imgCount = $items.length;
var curIdx = 0,
isFade = false; // 设置动作锁，防止用户频繁点击频繁执行，浪费性能
play(0);
autoPlay();
$pre.on('click',function(){
playPre ();
})
$next.on('click',function(){
playNext();
})
$bullet.find('li').on('click',function(){
var thisIdx = $(this).index();
play(thisIdx);
})
// play()的功能是传哪个下标就显示哪张图片
// 将curIdx的图片淡出，idx的图片淡入
// 同时设置底部分页器对应显示样式
function play (idx) {
// 先判断动作锁是否开启，如果已开启表示轮播动作正在执行，则不重复执行
if(isFade) return;
// 如果轮播动作未执行，则修改动作锁表示开始执行
isFade = true;
$items.eq(curIdx).fadeOut(500);
$items.eq(idx).fadeIn(500,function(){
// 轮播动作执行结束后继续加上动作锁
isFade = false;
})
curIdx = idx;
setBullet();
}
function playNext (){
// 显示下一张其实就是 play(idx+1)，但要将idx+1的值控制在图片数量范围内
play( (curIdx + 1) % imgCount );
}
function playPre (){
// 显示上一张，play(idx-1)，计算方式同上
play( (imgCount + curIdx - 1) % imgCount );
}
function setBullet (){
$bullet.find('li')
.removeClass('active')
.eq(curIdx).addClass('active');
}
function autoPlay (){
setInterval(function(){
playNext();
},2000)
}
</script>
