初级JS实现轮播图功能

最新推荐文章于 2022-08-29 17:10:39 发布

置顶 changeie

最新推荐文章于 2022-08-29 17:10:39 发布

阅读量641

点赞数 2

本文链接：https://blog.csdn.net/changeie/article/details/79660425

版权

初学JS，经过几天的研究，初步实现轮播图功能，轮播图也是几乎涉及每个网站都有的功能，所以轮播图是必须掌握的JS技能之一，以下是我轮播图的代码，还请各位大佬提出改进的意见（带注释，方便阅读）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现无缝轮播</title>
<style>
*{margin: 0;padding: 0;}
li{list-style-type: none;}
.carousel-wrap{
position: relative;overflow: hidden;height: 454px;
width: 1200px;border: 1px solid #CCC;
margin: 100px auto;
}
.carousel{width: 8400px;z-index: 9;position: absolute;left: -1200px;top: 0;}
.carousel li {float: left;width: 1200px;}
.carousel img{width: 100%;}
.arrow{z-index: 10;position: absolute;width: 30px;height: 50px;text-align: center;line-height: 50px;
top: 50%;margin-top: -25px;text-decoration: none;color: #333;
font-family: '宋体';font-size: 30px;background: rgba(0,0,0,.2);font-weight: 600;
}
.arrow-left{left: 0;}
.arrow-right{right: 0}
.indicators{z-index: 10;position: absolute;right: 10px;bottom: 10px;}
.indicator{float: left;margin-right: 10px;width: 8px;height: 8px;border-radius: 50%; background: #ccc;}
.indicator.active{background: #333;}
</style>
</head>

<body>

<div class="carousel-wrap">
<ul class="carousel">
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
</ul>
<a class="arrow arrow-left" href=""><</a>
<a class="arrow arrow-right" href="">></a>
<ul class="indicators">
<li class="indicator active"></li>
<li class="indicator"></li>
<li class="indicator"></li>
<li class="indicator"></li>
<li class="indicator"></li>
</ul>
</div>
<script src="js/move.js"></script>
<script>
var carousel = document.getElementsByClassName('carousel')[0],
arrowLeft = document.getElementsByClassName('arrow-left')[0],
arrowRight = document.getElementsByClassName('arrow-right')[0],
indicators = document.getElementsByClassName('indicator'),
carouselWrap = document.getElementsByClassName('carousel-wrap')[0];

var num = 7,carouselWidth=1200,count=1,timer=null;
// 左箭头设置点击事件
arrowLeft.onclick = function (e) {
e = e || event
e.preventDefault()
var l = parseInt(getStyle(carousel, 'left'))

count++
l = -carouselWidth*count
if(count===6){
move(carousel, {left: l}, function () {
count = 1
carousel.style.left = -carouselWidth*count + 'px'
setIndicatorStyle()
})
}else{
move(carousel, {left: l})
}
setIndicatorStyle()
}
// 右箭头实现点击事件
arrowRight.onclick = function (e) {
e = e || event
e.preventDefault()
var l = parseInt(getStyle(carousel, 'left'))

count--
l = -carouselWidth*count

if(count===0){
move(carousel, {left: l}, function () {
count = 5
carousel.style.left = -carouselWidth*count + 'px'
setIndicatorStyle()
})
}else{
setIndicatorStyle()
move(carousel, {left: l})
}
}

// 右下方指示器
for(var i=0;i<num-2;i++){
indicators[i].index = i
indicators[i].onclick = function () {
count = this.index + 1
setIndicatorStyle()
move(carousel, {left: -carouselWidth*count})
}
}

interval() // 自动轮播

// 鼠标移入暂停自动轮播
carouselWrap.onmouseover = function () {
clearInterval(timer)

}

// 鼠标移开记录轮播
carouselWrap.onmouseout = function () {
interval()
}

// 设置指示器样式
function setIndicatorStyle(){
for(var j=0;j<num-2;j++){
indicators[j].className = "indicator"
}
indicators[count-1].className = "indicator active"

}

// 自动轮播
function interval() {
timer = setInterval(function () {
count++
if(count === 6){
move(carousel, {left: -carouselWidth*count}, function () {
count = 1
carousel.style.left = -carouselWidth*count + 'px'
setIndicatorStyle()
})
}else{
move(carousel, {left: -carouselWidth*count})
setIndicatorStyle()
}
}, 2000)
}
</script>
</body>

</html>