先上一个简单的轮播图给大家看看效果：
1、分析轮播图原理：1）五张轮播图的原理是使用6张图片作为轮播，方便最后一张和第一张接轨，给用户带来较好的体验效果
2）当图片向左轮播时，图片的位置是向右移动的，同理当图片向右轮播时图片的位置是向左移动的
3）当轮播到最后一张时我们需要快速切换到第一张
2、实现过程：点击事件、自动轮播事件、以及切换索引显示
点击事件包括移入可视区后点击button显示，并且清除自动轮播的定时器，移出可视区后button消失，并且自动轮播，还有点击左右button的点击事件，以及点击下面小圆点的图片切换事件。
自动轮播事件就是在无点击的情况下自动播放图片，默认向右轮播，运用move函数设置定时器播放。
改变索引显示事件也是当显示当前图片便显示当前的索引点，并将其变红
3、实现
1、HTML和CSS样式简单点
body内的HTML如下：
<div class="wrapper">
<ul class="imgs">
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
<li><img src="./img/5.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
</ul>
<div class="btn leftBtn"><</div>
<div class="btn rightBtn">></div>
<ul class="dot">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/demo.js"></script>
css样式：
*{
margin:0px;
padding: 0px;
list-style: none;
}
.wrapper{
position: relative;
width:400px;
height:350px;
border:1px solid #eee;
margin:100px auto;
overflow: hidden;//设置隐藏，因为就是对.imgs的位置移动，移出可视区便使其不可见
}
.wrapper .imgs{
position: absolute;
left:0px;
width:2400px;
height: 350px;
font-size: 0px;
}
.wrapper .imgs li{
display: inline-block;/*行级块元素之间会有一个tab缩进，这个大小就是font-size的值*/
width:400px;
height:350px;
}
.wrapper .imgs li img{
width:100%;
height:100%;
}
.btn{
width:40px;
height:30px;
position: absolute;
top:50%;
margin-top: -15px;
background: yellow;
opacity: 0.4;
text-align: center;
line-height: 30px;
display: none;//初始化为none，方便hover事件中的show函数初始显示。
}
.leftBtn{
left:0px;
}
.rightBtn{
right:0px;
}
/* .wrapper .rings{
width:100%;
position: absolute;
bottom: 30px;
text-align: center;
} */
.wrapper .dot{
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -65px;
width:130px;
height: 20px;
text-align: center;
}
.wrapper .dot li{
float: left;
width:20px;
height:20px;
border-radius: 50%;
background: #fff;
font-size: 0px;//使li中的文本内容消失
margin-left: 4px;
}
jQuery实现：
//点击事件 点击前后 图片前后移动轮播
//自动移动事件 无点击事件时自动轮播图片
//改变索引值事件
var nowIndex = 0;
var timer = null,
num = $('.imgs li').length - 1,
len = $('.imgs li').width(),
lock = true;
// console.log(num, len);
function init() { //init()初始化函数，作为函数的入口函数
bindEvent();
autoMove();
changeIndex();
}
init();
function bindEvent() {
$('.wrapper').hover(function() {//鼠标移入移出事件
$('.btn').show();
clearInterval(timer);
}, function() {
$('.btn').hide();
autoMove();
})
$('.wrapper').on('click','.btn', function(){//左右button点击事件
if($(this).hasClass('leftBtn')){
move('prev');
}else if($(this).hasClass('rightBtn')) {
move('next');
}
})
$('.dot').on('click', 'li', function() {//索引值的点击事件
var index = $(this).index();
// console.log(index)
move(index);
})
}
function move(dir) {
if(lock){//设置锁，防止自动轮播与点击事件的冲突发生，使图片的显示位置发生改变
lock = false;
if(dir == 'prev'){
if(nowIndex == 0){
nowIndex = num;
$('.imgs').css('left', -nowIndex * len); //当图片位于最左侧时，将图片位置移回 -nowIndex * len处
}
nowIndex --;
$('.imgs').animate({'left': -nowIndex * len},1000, function(){ //设置突变的动画效果
changeIndex();
lock = true;
});
}else if(dir == 'next'){
if(nowIndex == num){
nowIndex = 0;
$('.imgs').css('left', -nowIndex * len);//向右同理
}
nowIndex ++;
$('.imgs').animate({'left': -nowIndex * len},1000, function(){
changeIndex();
lock = true;
});
}else{
nowIndex = dir;
$('.imgs').animate({'left': -nowIndex * len},400, function(){
changeIndex();
lock = true;
});
}
}
}
function changeIndex() {
$('.dot li').css('background','#fff');
if(nowIndex == num){ //索引值为0 - 4
$('.dot li').eq(0).css('background','#f40');
}else{
$('.dot li').eq(nowIndex).css('background','#f40');
}
}
function autoMove() {
if(lock){
clearInterval(timer);
timer = setInterval(function(){
move('next');
},2000);
}
}
本次小轮播图展示效果：
希望大家好好整理下思路，能拿下轮播图。