Posted in jQuery onJuly 29, 2020
本文实例为大家分享了jquery实现简单自动轮播图的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="author" content="Jxz">
<title></title>
<script src="../jquery-3.1.1.js"></script>
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 520px;
height: 280px;
margin: 100px auto;
position: relative;
}
#box .list li{
position: absolute;
top: 0;
left: 0;
display: none;
}
#box .list li.current{
display: block;
}
#box .count{
position: absolute;
left: 10px;
bottom: 10px;
}
#box .count li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fa0;
text-align: center;
line-height: 20px;
margin-left: 10px;
color: #fff;
opacity: 0.8;
cursor: pointer;
}
#box .count li.current{
background-color: #f60;
opacity: 1;
}
#box .btn{
position: absolute;
bottom:10px;
right: 15px;
}
#box .btn li{
width: 50px;
height: 50px;
background-color: #ccc;
float: right;
margin-left: 15px;
opacity: 0.8;
cursor: pointer;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current"><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
<li><img src="img/05.jpg" alt=""></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="btn">
<li class="right">></li>
<li class="left"><</li>
</ul>
</div>
</body>
</html>
<script>
// var aLi=$('.list li');
// var aNum=$('.count li');
// 记录当前显示的图片的索引
var current=0;
// 保存定时器
var timer=null;
timer=setInterval(autoPlay,1000)
// 自动播放
function autoPlay(){
current<$('.count li').length-1?current++:current=0;
show()
}
function show(){
// aLi.hide()
$('.list li').hide()
.eq(current).show();
// aNum.removeClass()
// .eq(current).addClass('current')
$('.count li').eq(current).toggleClass('current').siblings().removeClass('current');
}
// 手动
$('.count li').mouseenter(function(){
current=$(this).index()
show()
})
// 按钮控制选图
$('#box .left').click(function(){
current>0?current--:current=4;
show()
})
$('#box .right').click(function(){
current<$('.count li').length-1?current++:current=0;
show()
})
// 鼠标进图自动暂停
$('#box').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(autoPlay,1000);
})
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
jquery实现简单自动轮播图效果
- Author -
一像素的羁绊声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@