JavaScript實現(xiàn)輪播圖方法(邏輯清晰一看就懂)
更新時間：2023年12月26日 16:22:11 作者：Beannnnnnn
這篇文章主要給大家介紹了關于JavaScript實現(xiàn)輪播圖方法的相關資料,JS輪播圖的實現(xiàn)核心是使用JavaScript來控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下
輪播圖有很多種實現(xiàn)方法，這是其中一種最清晰的方法。思路很清晰，代碼很簡單，歡迎大佬多指教。
效果圖
先來看下效果圖，嫌麻煩就不用具體圖片來實現(xiàn)了，主要是理清思路。（自動輪播，左右按鈕切換圖片，小圓點切換圖片，鼠標移入暫停輪播，鼠標移出繼續(xù)輪播）
HTML
首先是html內容，布局很簡單，一個圖片列表，一個點列表，兩個按鈕。注意data-index使用HTML5中的data-xx屬性來嵌入自定義數(shù)據(jù)（下面JS代碼會提到）。記得給默認顯示的圖片和對應的小圓點加上active類哦。
<div class="wrap">
<ul class="list">
<li class="item active">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<ul class="pointList">
<li class="point active" data-index = 0></li>
<li class="point" data-index = 1></li>
<li class="point" data-index = 2></li>
<li class="point" data-index = 3></li>
<li class="point" data-index = 4></li>
</ul>
<button class="btn" id="leftBtn"> < </button>
<button class="btn" id="rightBtn"> > </button>
</div>CSS
思路：父容器list相對定位，item絕對定位，實現(xiàn)讓所有圖片重疊在父容器內。利用z-index來設置圖片高度，圖片高度最高會顯示在頂層上。那么整個容器中，左右切換按鈕和小圓點始終要在最頂層，不能被圖片覆蓋，所以他們的z-index一定要比圖片高。active是一個樣式，給某張圖片綁定這個樣式就能在最上層顯示。然后就是圖片切換的漸變效果，opacity完全不透明到透明，再加個transition動畫效果。最后就是cursor給小圓點添加“小手指”，其他就沒什么好說的了。
<style>
.wrap {
width: 800px;
height: 400px;
position: relative;
}
.list {
width: 800px;
height: 400px;
position: relative;
padding-left: 0px;
}
.item {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
left: 0;
opacity: 0;
transition: all .8s;
}
.item:nth-child(1) {
background-color: skyblue;
}
.item:nth-child(2) {
background-color: yellowgreen;
}
.item:nth-child(3) {
background-color: rebeccapurple;
}
.item:nth-child(4) {
background-color: pink;
}
.item:nth-child(5) {
background-color: orange;
}
.item.active {
z-index: 10;
opacity: 1;
}
.btn {
width: 60px;
height: 100px;
z-index: 100;
top: 150px;
position: absolute;
}
#leftBtn {
left: 0px;
}
#rightBtn {
right: 0px;
}
.pointList {
list-style: none;
padding-left: 0px;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 200;
}
.point {
width: 10px;
height: 10px;
background-color: antiquewhite;
border-radius: 100%;
float: left;
margin-right: 8px;
border-style: solid;
border-width: 2px;
border-color: slategray;
cursor: pointer;
}
.point.active{
background-color: cadetblue;
}
</style>Javascript
Index可以說是整個代碼里面的"核心"，先封裝一個清除active的方法，這里面要清除圖片的active（顯示在最上層），比如切換到下一張圖上張圖的active就要清除。還有point的active（圖片對應小圓點改變樣式）。然后goIndex這個方法就是給圖片和對應的小圓點同時加上active，左右按鈕綁定的方法就不說了。
用getAttribute拿到剛才給li標簽綁定的data-index屬性，綁定圖片index = pointindex，就能實現(xiàn)點擊小圓點圖片切換了。由于上面goIndex方法早已經(jīng)綁定好了給圖片添加active樣式的時候也給小圓點添加的樣式了，就可以實現(xiàn)圖片切換小圓點跟隨變化的效果。
<script>
var items = document.querySelectorAll(".item");//圖片節(jié)點
var points = document.querySelectorAll(".point")//點
var left = document.getElementById("leftBtn");
var right = document.getElementById("rightBtn");
var all = document.querySelector(".wrap")
var index = 0;
var time = 0;//定時器跳轉參數(shù)初始化
//封裝一個清除active方法
var clearActive = function () {
for (i = 0; i < items.length; i++) {
items[i].className = 'item';
}
for (j = 0; j < points.length; j++) {
points[j].className = 'point';
}
}
//改變active方法
var goIndex = function () {
clearActive();
items[index].className = 'item active';
points[index].className = 'point active'
}
//左按鈕事件
var goLeft = function () {
if (index == 0) {
index = 4;
} else {
index--;
}
goIndex();
}
//右按鈕事件
var goRight = function () {
if (index < 4) {
index++;
} else {
index = 0;
}
goIndex();
}
//綁定點擊事件監(jiān)聽
left.addEventListener('click', function () {
goLeft();
time = 0;//計時器跳轉清零
})
right.addEventListener('click', function () {
goRight();
time = 0;//計時器跳轉清零
})
for(i = 0;i < points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
goIndex();
time = 0;//計時器跳轉清零
})
}
//計時器輪播效果
var timer;
function play(){
timer = setInterval(() => {
time ++;
if(time == 20 ){
goRight();
time = 0;
}
},100)
}
play();
//移入清除計時器
all.onmousemove = function(){
clearInterval(timer)
}
//移出啟動計時器
all.onmouseleave = function(){
play();
}
</script>總結：這個簡單的輪播圖實現(xiàn)例子是第一次寫最容易理解，邏輯最清晰的一種。下面我把完整的代碼塊放出來，直接復制粘貼就可以運行。
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
width: 800px;
height: 400px;
position: relative;
}
.list {
width: 800px;
height: 400px;
position: relative;
padding-left: 0px;
}
.item {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
left: 0;
opacity: 0;
transition: all .8s;
}
.item:nth-child(1) {
background-color: skyblue;
}
.item:nth-child(2) {
background-color: yellowgreen;
}
.item:nth-child(3) {
background-color: rebeccapurple;
}
.item:nth-child(4) {
background-color: pink;
}
.item:nth-child(5) {
background-color: orange;
}
.item.active {
z-index: 10;
opacity: 1;
}
.btn {
width: 60px;
height: 100px;
z-index: 100;
top: 150px;
position: absolute;
}
#leftBtn {
left: 0px;
}
#rightBtn {
right: 0px;
}
.pointList {
list-style: none;
padding-left: 0px;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 200;
}
.point {
width: 10px;
height: 10px;
background-color: antiquewhite;
border-radius: 100%;
float: left;
margin-right: 8px;
border-style: solid;
border-width: 2px;
border-color: slategray;
cursor: pointer;
}
.point.active{
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li class="item active">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<ul class="pointList">
<li class="point active" data-index = 0></li>
<li class="point" data-index = 1></li>
<li class="point" data-index = 2></li>
<li class="point" data-index = 3></li>
<li class="point" data-index = 4></li>
</ul>
<button class="btn" id="leftBtn"> < </button>
<button class="btn" id="rightBtn"> > </button>
</div>
<script>
var items = document.querySelectorAll(".item");//圖片
var points = document.querySelectorAll(".point")//點
var left = document.getElementById("leftBtn");
var right = document.getElementById("rightBtn");
var all = document.querySelector(".wrap")
var index = 0;
var time = 0;//定時器跳轉參數(shù)初始化
//清除active方法
var clearActive = function () {
for (i = 0; i < items.length; i++) {
items[i].className = 'item';
}
for (j = 0; j < points.length; j++) {
points[j].className = 'point';
}
}
//改變active方法
var goIndex = function () {
clearActive();
items[index].className = 'item active';
points[index].className = 'point active'
}
//左按鈕事件
var goLeft = function () {
if (index == 0) {
index = 4;
} else {
index--;
}
goIndex();
}
//右按鈕事件
var goRight = function () {
if (index < 4) {
index++;
} else {
index = 0;
}
goIndex();
}
//綁定點擊事件監(jiān)聽
left.addEventListener('click', function () {
goLeft();
time = 0;//計時器跳轉清零
})
right.addEventListener('click', function () {
goRight();
time = 0;//計時器跳轉清零
})
for(i = 0;i < points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
goIndex();
time = 0;//計時器跳轉清零
})
}
//計時器
var timer;
function play(){
timer = setInterval(() => {
time ++;
if(time == 20 ){
goRight();
time = 0;
}
},100)
}
play();
//移入清除計時器
all.onmousemove = function(){
clearInterval(timer)
}
//移出啟動計時器
all.onmouseleave = function(){
play();
}
</script>
</body>
</html>總結
到此這篇關于JavaScript實現(xiàn)輪播圖方法的文章就介紹到這了,更多相關JS實現(xiàn)輪播圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Bootstrap輪播插件簡單使用方法，介紹了使用bootstrap輪播插件的作用，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了ES6基礎之展開語法(Spread syntax)，主要介紹了擴展語法的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細介紹了js canvas實現(xiàn)寫字動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
js實現(xiàn)適用于素材網(wǎng)站的黑色多級菜單導航條效果
這篇文章主要介紹了js實現(xiàn)適用于素材網(wǎng)站的黑色多級菜單導航條效果,涉及javascript鼠標事件及頁面元素樣式的動態(tài)切換技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要給大家匯總介紹了Javascript數(shù)組操作函數(shù),需要的朋友可以參考下2015-02-02
javascript實現(xiàn)簡單的二級聯(lián)動
這篇文章主要介紹了javascript實現(xiàn)簡單的二級聯(lián)動,非常的實用，需要的朋友可以參考下2015-03-03
不知道屏幕前的朋友們，有沒有和我一樣，覺得LRU算法原理很容易理解，實現(xiàn)起來卻很復雜。所以本文就為大家整理了一下實現(xiàn)的示例代碼，需要的可以參考一下2023-04-04
柯里化是將接受多個參數(shù)的函數(shù)轉換成一系列只接受單個參數(shù)的函數(shù)的過程，而反柯里化是將柯里化函數(shù)轉換成接受多個參數(shù)的函數(shù)的過程，本文將帶大家理解 js 中的柯里化與反柯里化,需要的朋友可以參考下2023-07-07
截取字符串的使用比較廣泛，有很多中方法，本文粗略的整理了一些，感興趣的額朋友可以才參考下2013-10-10
這篇文章主要為大家詳細介紹了微信JSSDK調用微信掃一掃功能的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07