溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了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如何實現簡單自動輪播圖的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
