原生JS實現滑動輪播圖
效果
實現原理
純粹只使用了html+css+js
發現還是比較簡單的,並不需要藉助別的外掛或類庫來實現
核心是把圖片組合成一行序列,通過左右移動,以及父元素的overflow:hidden來決定顯示的圖片
簡單畫了一下:
搭建基本介面
<div id="box">
<img src="images/arrowleft.png" id="arrow-left">
<img src="images/arrowright.png" id="arrow-right">
<ul id="multi-circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="multi-images">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<div class="clear"></div>
</div>
</div>
這裡主要分成三個部分,兩個向左向右的箭頭,圓點序列,圖片序列
全部運用絕對定位對其佈局,通過z-index確定他們的層疊關係
事先定義圖片的寬度高度作為css變數,方便各元素計算確定高度寬度
#box {
position:relative;
width:var(--imageWidth);
height:var(--height);
overflow: hidden;
}
#multi-circles {
position:absolute;
right:30px;
bottom:10px;
z-index: 2;
}
#multi-images {
position:absolute;
left:0;
top:0;
z-index: 1;
width:calc(var(--imageWidth)*5);
height:var(--height);
}
#arrow-right,
#arrow-left {
position: absolute;
top:50%;
margin-top:-20px;
height:40px;
z-index: 3;
}
#arrow-right {
right:0;
}
#arrow-left {
left:0;
}
廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
確定圖片序號
為了實現輪播,我們得知道現在應該要顯示哪一張圖片
在js中定義變數currentIndex,表示當前顯示圖片的序號,初始為0
當點選箭頭,或者滑鼠移動到圓點上時,只要改變序號就可以了
//先dom操作,獲取html元件
var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var multiImages = document.getElementById("multi-images");
var circles = document.getElementById("multi-circles").getElementsByTagName("li");
var box=document.getElementById("box");
//為箭頭和圓點繫結事件
arrowLeft.addEventListener("click", preMove);
arrowRight.addEventListener("click", nextMove);
for (let i = 0; i < circles.length; i++) {
circles[i].setAttribute("id", i);
circles[i].addEventListener("mouseenter", overCircle);
}
//滑過圓點
function overCircle() {
currentIndex = parseInt(this.id);
}
//左箭頭
function preMove() {
if (currentIndex != 0) {
currentIndex--;
}
else {
currentIndex = 4;
}
}
//右箭頭
function nextMove() {
if (currentIndex != 4) {
currentIndex++;
}
else {
currentIndex = 0;
}
}
滑動
現在我們已經知道了現在應該顯示哪一張圖片,那要怎麼顯示呢?
上面我們已經說過了滑動的原理是改變圖片序列的位置,左右移動
加上父元素的overflow:hidden來只顯示對應圖片
於是只要寫這樣一個函式,加到之前的事件裡
function moveImage() {
multiImages.style.left = -currentIndex * 400 + "px";
}
這樣是生硬的跳動,為了實現滑動
網上有自己編寫animate函式,或者用jquery的函式的方法
這裡我想到了直接用css3的transition屬性
只要在圖片序列的css類下加一句
#multi-images {
transition: 1s;
}
就可以實現自然的滑動
圓點顏色
我們希望當顯示圖片的時候,對應圓點的顏色可以變為紅色
把現在的圓點變色很簡單,只要currentIndex這一個變數就可以幫助實現
但還要把前一個顯示的圓點變回白色
誠然,可以先用一個for迴圈,把所有圓點都變成白色
但這樣就出現了多餘的工作,我們明明只要變一個圓點的顏色就好
於是新定義一個變數preIndex,記錄前一個顯示的圖片
只要在先前繫結的事件函式中,第一句先令preIndex=currentIndex
就在圖片序號改變前儲存到了前一個序號
然後在事件末尾新增這樣一個函式
function changeCircleColor(preIndex, currentIndex) {
circles[preIndex].style.backgroundColor = "rgb(240, 240, 240)";
circles[currentIndex].style.backgroundColor = "rgb(245, 40, 40)";
}
懸浮箭頭
我們希望當滑鼠放到輪播圖上時,左右箭頭才顯示
於是先讓箭頭的display為none
#arrow-right,
#arrow-left {
display:none;
}
給box新增mouseover事件
box.addEventListener("mouseover",function() {
arrowLeft.style.display="block";
arrowRight.style.display="block";
});
滑鼠放到箭頭上時,滑鼠變成點選樣式
#arrow-right,
#arrow-left {
cursor:pointer;
}
自動輪播
目前為止已經完成了基本的工作
不過我們還希望它可以自動輪播
當滑鼠放到輪播圖上時,輪播暫停
於是我們建立一個定時器
當滑鼠放到box上,清除定時器,離開則重新建立
timer=setInterval(nextMove,2000);
box.addEventListener("mouseover",function() {
clearInterval(timer);
});
box.addEventListener("mouseout",function() {
timer=setInterval(nextMove,2000);
});
小插曲
在製作的時候,還遇到了一個很奇怪的bug
是滑鼠移動到圓點的左邊一點點時,也會觸發事件變色
後來換了淺色背景,才發現是因為<li>的預設樣式
圓點的左邊還有一個很小的圓點
去除這個樣式即可
ul,
li {
list-style: none;
}