先上一個簡單的輪播圖給大家看看效果：
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);
}
}
本次小輪播圖展示效果：
希望大家好好整理下思路，能拿下輪播圖。