利用JQuery实现轮播图

上一篇文章写了利用初级JS实现无缝轮播图，但是实际写起来有点费劲，量有些大，如果改用jQuery写无缝轮播图的话，写起来比较便捷，而已逻辑比较清晰，简单，实现起来比较快捷，性能相对于初级JS来说也会高很多。以下为代码，供大家学习和参考。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin: 0;padding: 0;}
li{list-style-type: none;}
.carousel-wrap{
position: relative;overflow: hidden;height: 454px;
width: 1200px;
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/jquery.js"></script> //这要引用jquery的方法，W3C能下载。
<script>
var carousel = $('ul.carousel'),
arrowLeft = $('a.arrow-left'),
arrowRight = $('a.arrow-right'),
indicators = $('li.indicator'),
carouselWrap = $('div.carousel-wrap');

var num = 5,carouselWidth=490,count=1,timer=null;

//设置左右箭头的点击事件

arrowLeft.click(function (e) {

e.preventDefault()
move(true)
})
arrowRight.click(function(e){
e.preventDefault()
move()
})

// 指示器
indicators.click(function () {
count = $(this).index()
setIndicatorStyle()
carousel.finish().animate({left:-carouselWidth*count},500)
})

// 设置指示器样式
function setIndicatorStyle(){
indicators.eq(count-1).addClass('active').siblings().removeClass('active')
}

interval()
// 鼠标移入暂停自动轮播
carouselWrap
.mouseover(function () {
clearInterval(timer)
})
.mouseout(interval) // 鼠标移开记录轮播

// 动画主函数
function move(flag) {
if(!flag){
count++
l = -carouselWidth*count
if(count===num-1){
carousel.finish().animate({
left: l
}, 500, function(){
count = 1
setIndicatorStyle()
$(this).css('left', -carouselWidth*count)
})
}else{
setIndicatorStyle()
carousel.finish().animate({
left: l
}, 500)
}
}else{
count--
l = -carouselWidth*count
if(count === 0){
carousel.finish().animate({
left: l
}, 500, function(){
count = num - 2
setIndicatorStyle()
$(this).css('left', -carouselWidth*count)
})
}else{
setIndicatorStyle()
carousel.finish().animate({
left: l
}, 500)
}
}
}

// 自动轮播
function interval() {
timer = setInterval(move, 2000)
}
</script>
</body>

</html>

这样相对于初级JS来说，代码的量少很多，代码健壮性也很高，效率大大的提高。

来源：CSDN

作者：changeie

链接：https://blog.csdn.net/changeie/article/details/79660540

标签

轮播