實現瞬間換圖的輪播圖而不是滑動效果的輪播圖
實現效果：
1.圖片和控制圖片的圓點按時間間隔自動切換
2.鼠標進入輪播圖范圍時圖片和控制點都停止切換
3.鼠標進入控制點時切換到對應的圖片
4.點擊左右邊的箭頭框時切換到前一張和后一張，控制點也切換
代碼：
第一步，設置樣式
<style type="text/css"> //內部樣式
*{
margin: 0; //清空邊距
padding: 0;
}
div{ //總輪播框--整張圖片大小
width: 450px;
height: 270px;
margin: 20px auto;
overflow: hidden;
position: relative;
border: 1px solid red;
}
img{ //更改圖片display屬性和浮動
display: block;
float: left;
}
ul,ol{ //清除列表前面的默認樣式圓點
list-style: none;
}
ul{ //設置圖片列表的寬度為 圖片寬度*圖片數量
width: 700%;
height: 270px;
}
ol{ //設置控制點的位置
position: absolute;
left: 116px;
bottom: 0;
}
ol li{ //設置控制點的形狀和間距和背景顏色，並且浮動后排成一橫排
width: 10px;
height: 10px;
border-radius: 5px;
float: left;
margin: 10px;
background-color: white;
}
.on{ //設置控制點選中時的樣式
background-color: red;
}
.left-arrow{ //設置左箭頭的位置和樣式
width: 40px;
height: 120px;
position: absolute;
top: 75px;
left: 0px;
background-color: rgba(0,0,0,0.5);
font-size: 60px;
cursor: pointer;
color: white;
}
.right-arrow{ //設置右箭頭的位置和樣式
width: 40px;
height: 120px;
position: absolute;
top: 75px;
right: 0px;
background-color: rgba(0,0,0,0.5);
font-size: 60px;
cursor: pointer;
color: white;
}
</style>
<body>
<div>
<ul> //列表中放入要輪播的圖片
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
</ul>
<ol> //列表中放入控制點，第一個控制點給上已選中樣式（開始時是第一張圖所以第一個控制點也是選中狀態）
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="left-arrow" id="la">◀</div> //左箭頭
<div class="right-arrow" id="ra">▶</div> //右箭頭
</div>
</body>
樣式就設置完成
現在開始寫輪播圖js部分
先獲取需要操作的標簽
var kuang = document.querySelector("div"); //獲取整個輪播圖的框，方便鼠標放上時停止輪播
var pic = document.querySelector("ul"); //獲取ul標簽 存放圖片的列表
var list = document.querySelector("ol").getElementsByTagName("li"); //獲取ol標簽 存放控制點的列表
var timer; //定義一個定時器，方便清除
var i = 0; //定義一個i 作為當前顯示的圖片和控制點的序號
var la = document.getElementById("la"); //獲取左邊的箭頭
var ra = document.getElementById("ra"); //獲取右邊的箭頭
寫出圖片和控制點切換時的函數
function change(num){ //切換時的函數名叫 change 設置一個形參num 用來接收實參 即當前正在顯示的圖片和控制點的序號
pic.style.marginLeft = -450*num+"px"; //設置圖片向左移動 圖片寬度*num px 的距離 可顯示到另一張圖片 實現圖片切換
for(let j = 0; j < 7; j++){ //設置循環 為了將所有（0-6）的控制點的樣式清空
list[j].setAttribute("class",""); //添加class 為空
}
list[num].className = "on"; //將當前需要顯示的圖片和控制點的序號給上樣式 添加class 為 on on在style中是已經寫出的樣式
i = num; //將 num 的值 賦給 i 改變整個循環的進度 讓整個循環能從正在顯示的這張圖片開始自動播放以及左右點擊切換
}
function autoPlay() { //定義一個函數autoPlay，每次調用它時改變i的值 讓定時器調用它形成自動輪播的效果
i++; //每次用定時器調用 都讓i+1 顯示到后面一張
if(i == 7){ //到最后一張時 回到第一張
i = 0;
}
change(i); //調用change 將i 傳入
}
var timer = setInterval(autoPlay,1000); //定義timer 定時器每隔1000毫秒調用一次autoPlay函數，實現自動輪播
kuang.onmouseover = function(){ //定義輪播圖的鼠標移入時間：當鼠標移入輪播圖上時 清除定時器timer讓圖片和控制點不再自動循環
clearInterval(timer)
}
kuang.onmouseout = function(){ //定義輪播圖的鼠標移出時間：當鼠標移出輪播圖上時 重新定義定時器timer讓圖片和控制點繼續自動循環
timer = setInterval(autoPlay,1000);
}
for(let j = 0 ; j < 7; j++){ //通過循環給每個控制點都給上鼠標移入事件
list[j].onmouseover = function(){
change(j); //鼠標移入時將鼠標移入的控制點的序號傳入change函數 讓change函數將圖片和控制點的樣式都轉換
}
}
la.onclick = function(){ //給左箭頭定義一個鼠標點擊事件：當點擊它時讓圖片和控制點都向左改變一次
i = i-1; //將當前顯示的圖片的序號減一，如果序號從0減到-1 將序號改成最后一張的序號
if(i == -1){
i = 6;
change(i) //然后直接調用change函數改變
}else{
change(i) //不管i改變成哪個序號都要調用change函數改變
}
}
ra.onclick = function(){ //和左箭頭一樣 只是當圖片是最后一張時 點擊右箭頭要讓圖片返回第一張
i = i+1;
if(i == 7){
i = 0;
change(i)
}else{
change(i)
}
}
整個輪播圖就簡單實現了。i從0到6的循環可以有更簡單的表示方式 i = i%7 ,這樣就不要if語句判斷
將改變圖片和控制點樣式的函數封裝后直接傳值調用，可大幅度減少代碼量。