實現(xiàn)效果：
自動向右循環(huán)播放
鼠標(biāo)懸停，移出繼續(xù)播放
點擊向右按鈕，跳到下一張
點擊向左按鈕，跳到上一張
保證圖片的過渡效果完整呈現(xiàn)后，才能跳到下一張
底部圓點隨圖片位置切換激活狀態(tài)
實現(xiàn)思路：
把第一張圖片復(fù)制到最后一張
當(dāng)播放到最后一張時，無縫切換到第一張，然后繼續(xù)放第二張
注意點↓！
代碼執(zhí)行過快時，可以用異步任務(wù)，保證代碼執(zhí)行的先后順序
setTimeout(function(){
// 跳到第二張
img_location += 1;
olist.style.transition = "left 0.5s ease 0s";
olist.style.left = -650*img_location+"px";
},0) // 時間可以設(shè)置為0
需要頁面自動執(zhí)行時，可以定義函數(shù)，模擬點擊行為，不用重寫一遍文章來源：http://www.zghlxwxcb.cn/news/detail-809547.html
// 定義一個全局函數(shù)，自動跳到下一張，方便鼠標(biāo)移入移出時調(diào)用
function move(){
timer = setInterval(function(){
// 每隔1s點擊向右按鈕
rightbtn.click();
},1000)
}
實現(xiàn)代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-809547.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑馬燈輪播圖</title>
<style>
* {
margin: 0;
padding: 0;
}
.carousel {
width: 650px;
margin: 50px auto;
position: relative;
overflow: hidden;
/* 超出部分隱藏 */
}
/* 標(biāo)題-輪播圖 */
h1 {
text-align: center;
}
.carousel ul {
list-style: none;
/* 消除ul自帶圓點 */
}
.carousel #list {
width: 6000px;
position: relative;
left: 0px;
/* 初始位置 */
transition: left 0.5s ease 0s;
/*圖片跳轉(zhuǎn)的過渡效果*/
}
.carousel #list img {
width: 650px;
}
.carousel #list li {
float: left;
/* li排成一排顯示 */
}
/* 上一張/下一張控制按鈕 */
.carousel>a {
position: absolute;
width: 30px;
height: 50px;
/* 垂直居中，距頂部一半的父元素盒子寬度，再向上移動自身的一半 */
top: 50%;
margin-top: -25px;
background-color: rgba(163, 166, 167, 0.5);
}
.carousel>a>img {
margin-left: -8px;
}
.carousel .leftbtn {
left: 20px;
}
.carousel .rightbtn {
right: 20px;
}
/* 底部定位圓點list */
.carousel #location_list {
width: 120px;
position: absolute;
top: 350px;
left: 270px;
}
.carousel #location_list li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px;
border: 1px solid white;
}
/* 圓點被激活時的樣式，動態(tài)為圓點增加class */
.carousel #location_list li.active {
background-color: bisque;
}
</style>
</head>
<body>
<h1>輪播圖</h1>
<div class="carousel">
<!--圖片列表 -->
<ul id="list">
<li><img src="images/number/1.jpg" alt="" /></li>
<li><img src="images/number/2.jpg" alt="" /></li>
<li><img src="images/number/3.jpg" alt="" /></li>
<li><img src="images/number/4.jpg" alt="" /></li>
<li><img src="images/number/5.jpg" alt="" /></li>
</ul>
<!-- 左右按鈕 -->
<a href="javascript:;" class="leftbtn"><img src="./images/lunbo/chevron-left.png" alt="" srcset=""></a>
<a href="javascript:;" class="rightbtn"><img src="./images/lunbo/chevron-right.png" alt="" srcset=""></a>
<!-- 圓點列表 -->
<ul id="location_list">
<!-- 默認(rèn)激活第一個 -->
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var carousel = document.querySelector(".carousel");
// 獲取圖片列表ul
var olist = document.getElementById("list");
// 獲取定位數(shù)組
var location_list = document.querySelectorAll('#location_list>li');
// 向左按鈕
var leftbtn = document.querySelector('.leftbtn');
// 向右按鈕
var rightbtn = document.querySelector('.rightbtn');
// 將第一張圖片加到最后一張，方便循環(huán)
var oli = document.querySelector("#list li:first-child")
olist.innerHTML += oli.innerHTML;
// 當(dāng)前顯示的圖片定位
var img_location = 0;
// 當(dāng)前的圓點定位
var dot_location = 0
// 定義一個全局定時器變量
var timer = null;
// 默認(rèn)不上鎖，該狀態(tài)為了保證過渡效果能完整呈現(xiàn)
var islock = false;
// 定義一個全局函數(shù)，自動跳到下一張，方便鼠標(biāo)移入移出時調(diào)用
function move() {
timer = setInterval(function () {
// 每隔1s點擊向右按鈕
rightbtn.click();
}, 1000)
}
// 頁面加載后自動調(diào)用，實現(xiàn)自動跳轉(zhuǎn)下一張
move();
// 鼠標(biāo)移入，清除定時器
carousel.onmouseenter = function () {
clearInterval(timer);
}
// 鼠標(biāo)移出，調(diào)用自動播放
carousel.onmouseleave = function () {
move();
}
// 點擊按鈕切換下一張
rightbtn.onclick = function () {
if (islock) { return; }
islock = true;
if (img_location === 5) {
// 清除過渡效果，從最后一張無縫銜接到開頭
olist.style.transition = "none";
olist.style.left = "0px";
img_location = 0;
}
// 由于代碼執(zhí)行過快，所以需要放到異步執(zhí)行語句里
setTimeout(function () {
// 跳到第二張
img_location += 1;
dot_location += 1;
olist.style.left = -650 * img_location + "px";
olist.style.transition = "left 0.5s ease 0s";
// 如果跳轉(zhuǎn)后是第6張圖片，實際上就是第一張圖，圓點應(yīng)該定位在第1個
if (img_location === 5) {
dot_location = 0;
location_list[dot_location].className = "active";
location_list[4].className = "none";
} else {
// 激活當(dāng)前定位的圓點
location_list[dot_location].className = "active";
// 上一個圓點取消激活狀態(tài)
location_list[dot_location - 1].className = "none"
}
}, 0)
setTimeout(function () {
islock = false;
}, 500)
};
// 點擊按鈕切換上一張
leftbtn.onclick = function () {
if (islock) { return; }
islock = true;
// 清除過渡效果，從第一張無縫銜接到最后一張
if (img_location === 0) {
img_location = 5;
olist.style.transition = "none";
olist.style.left = -650 * img_location + "px";
}
// 由于代碼執(zhí)行過快，所以需要放到異步執(zhí)行語句里
setTimeout(function () {
// 跳到上一張圖
img_location -= 1;
dot_location -= 1;
olist.style.transition = "left 0.5s ease 0s";
olist.style.left = -650 * img_location + "px";
// 如果跳完后是第五張圖，圓點位置也要相應(yīng)變成最后一個
if (img_location === 4) {
dot_location = 4;
location_list[dot_location].className = "active";
location_list[0].className = "none";
} else {
location_list[dot_location].className = "active";
location_list[dot_location + 1].className = "none"
}
}, 0)
setTimeout(function () {
islock = false;
}, 500)
}
</script>
</body>
</html>
到了這里，關(guān)于js實現(xiàn)左右切換輪播圖效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
