前端是一条很长的路，新入坑的小伙伴且行且珍惜。
刚学习js时轮播图是我们不可绕过的一个很经典的题目，虽然现在https://www.swiper.com.cn/做的很好，可以满足我们日常工作中绝大多数的工作，但是基本的实现还是需要我们理解的。一个小练习。
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.bar {
width: 400px;
height: 200px;
margin: 100px auto;
overflow: hidden;
position: relative;
top: 0;
left: 0;
}
.bar-box {
position: absolute;
left: 0;
top: 0;
}
.bar .bar-son {
width: 400px;
height: 200px;
float: left;
text-align: center;
line-height: 200px;
color: #ffffff;
background: #555555;
}
.bar-canble {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, .8);
position: absolute;
top: 40%;
cursor: pointer;
}
.bar-l {
left: 10px;
}
.bar-r {
right: 10px;
}
/* 小圆点 */
.dot {
overflow: hidden;
position: absolute;
bottom: 10px;
left: 34%;
list-style: none;
}
.dot li {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #ffffff;
float: left;
margin-right: 8px;
cursor: pointer;
}
.dot .active {
background-color: #F7DE1F;
}
</style>
// html
<div class="bar">
<div class="bar-box">
<div class="bar-son">1</div>
<div class="bar-son">2</div>
<div class="bar-son">3</div>
<div class="bar-son">4</div>
<div class="bar-son">5</div>
<div class="bar-son">6</div>
</div>
<div class="bar-l bar-canble"></div>
<div class="bar-r bar-canble"></div>
<ul class="dot">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
var barBox = $('.bar-box'); // 获取盒子
var barSon = $('.bar-son'); // 获取轮播元素
var _index = 0; // 索引值
var lock = true; // 锁，注：防止连续快速切换时出现的bug
var barBoxWidth = barSon.length * barSon.width() + 400; // 盒子宽度
barBox.css({ width: barBoxWidth }); // 设置盒子宽度
// 向右按钮
$('.bar-r').click(function() {
if(lock) {
// 点击后锁上锁子，防止快速点击
lock = false;
// 点击之前先清掉小圆点选中的样式
$('.dot li').removeClass('active');
_index++;
if(_index == barSon.length) {
// 最后一张时特殊处理，完成无缝衔接
barBox.find('.bar-son:first').clone().appendTo(barBox); // 复制第一个插入到最后面去
barBox.animate({
left: -(_index * 400)
}, function() {
// 动画结束后重置left，并删除掉克隆的 barSon
barBox.css({ left: 0 });
barBox.find('.bar-son:last').remove();
_index = 0;
// 动画结束后解开锁子
lock = true;
// 小圆点跟随切换
$('.dot li').eq(_index).addClass('active');
});
} else {
// 正常情况下轮播逻辑
barBox.animate({
left: -(_index * 400)
}, function() {
lock = true;
$('.dot li').eq(_index).addClass('active');
});
}
}
});
// 向左按钮
$('.bar-l').click(function() {
if(lock) {
lock = false;
$('.dot li').removeClass('active');
_index--;
// 第一张时特殊处理，完成无缝衔接
if(_index == -1) {
barBox.find('.bar-son:last').clone().prependTo(barBox);
barBox.css({ left: -400 });
barBox.animate({
left: 0
}, function() {
_index = barSon.length - 1;
barBox.css({ left: -(_index * 400) });
barBox.find('.bar-son:first').remove();
lock = true;
$('.dot li').eq(_index).addClass('active');
});
} else {
// 正常情况
barBox.animate({
left: -(_index * 400)
}, function() {
lock = true;
$('.dot li').eq(_index).addClass('active');
});
}
}
});
// 按钮
$('.dot li').click(function() {
var that = $(this);
if(lock) {
lock = false;
// 获取小圆点indedx( 下标 );
_index = that.index();
// 调整轮播位置
barBox.animate({
left: -(_index * 400)
}, function() {
lock = true;
});
// 切换选中的小圆点样式
$('.dot li').removeClass('active');
that.addClass('active');
}
});
}
</script>
