使用js代碼完成輪播圖效果(正常模式和循環模式),因爲博客裏不能上傳視頻,所以我只能在文章後面用一張圖片來展示效果,具體效果大家可以自己運行一下代碼試試.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="Fly">
<title>循環切換 單邊切換</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Microsoft yahei, serif;
}
#banner {
position: relative;
width: 600px;
border: 1px solid #ccc;
margin: 50px auto;
height: 375px;
}
#banner ul li {
position: absolute;
list-style: none;
}
#banner ul li img {
width: 600px;
height: 375px;
display: none;
}
#banner p {
position: absolute;
width: 100%;
line-height: 25px;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
#banner p.top {
top: 0;
}
#banner p.bottom {
bottom: 0;
}
#banner a {
position: absolute;
top: 50%;
text-decoration: none;
width: 40px;
color: #fff;
font-size: 25px;
margin-top: -15px;
line-height: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
#banner a.prev {
left: 0;
}
#banner a.next {
right: 0;
}
.btnBar {
position: relative;
width: 600px;
margin: 50px auto;
text-align: center;
}
.btnBar button {
padding: 10px;
background-color: #ccc;
}
.btnBar button.active {
background-color: red;
color: #fff;
}
#banner ul li img.show {
display: block;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3529402346,570658824&fm=26&gp=0.jpg" alt="" class="show">
</li>
<li>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1212787456,3335140443&fm=26&gp=0.jpg" alt="">
</li>
<li>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1164487775,3540574714&fm=26&gp=0.jpg" alt="">
</li>
<li>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3546451144,3031758588&fm=26&gp=0.jpg" alt="">
</li>
<li>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3331671520,202847091&fm=26&gp=0.jpg" alt="">
</li>
</ul>
<p class='top'>toptoptop</p>
<!-- 左右按鈕 -->
<a class='prev' href="javascript:void(0);"><</a>
<a class='next' href="javascript:void(0);">></a>
</div>
<div class="btnBar">
<button class='active'>正常模式</button>
<button>循環模式</button>
</div>
<script>
var oprev = document.querySelector('.prev')
var onext = document.querySelector('.next')
var oimgs = document.querySelectorAll('#banner > ul > li > img')
var oTop = document.querySelector('.top')
var obtns = document.querySelectorAll('.btnBar > button')
var index = 0
var Ishow = true
// console.info(oprev)
// console.info(onext)
// console.info(oimgs)
// console.info(obtns)
// 左邊按鈕添加點擊事件
oprev.onclick = function () {
index--
if (Ishow) {
// 正常模式
if (index < 0) {
index = 0
}
oimgs[index].classList.add('show')
oimgs[index + 1].classList.remove('show')
} else {
// 循環模式
if (index < 0) index = 4
oimgs[index].classList.add('show')
if (index === 4) {
oimgs[0].classList.remove('show')
} else {
oimgs[index + 1].classList.remove('show')
}
}
// 控制當前頁面處於第幾張圖片
oTop.innerHTML = index + 1 + "/5"
}
// 右邊按鈕添加點擊事件
onext.onclick = function () {
index++
if (Ishow) {
// 正常模式
if (index > 4) {
index = 4
}
oimgs[index].classList.add('show')
oimgs[index - 1].classList.remove('show')
} else {
// 循環模式
if (index > 4) index = 0
oimgs[index].classList.add('show')
if (index === 0) {
oimgs[4].classList.remove('show')
} else {
oimgs[index - 1].classList.remove('show')
}
}
oTop.innerHTML = index + 1 + "/5"
}
// 選中正常模式
obtns[0].onclick = function() {
Ishow=true
obtns[0].classList.add('active')
obtns[1].classList.remove('active')
// console.info(Ishow)
}
// 選中循環模式
obtns[1].onclick = function() {
Ishow=false
obtns[1].classList.add('active')
obtns[0].classList.remove('active')
// console.info(Ishow)
}
oTop.innerHTML = index + 1 + "/5"
</script>
</body>
</html>
效果圖如下所示:
