jquery實現簡單自動輪播圖效果
阿新 • • 發佈：2020-07-30
本文例項為大家分享了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="jquery實現簡單自動輪播圖效果"></li>
<li><img src="img/02.jpg" alt="jquery實現簡單自動輪播圖效果"></li>
<li><img src="img/03.jpg" alt="jquery實現簡單自動輪播圖效果"></li>
<li><img src="img/04.jpg" alt="jquery實現簡單自動輪播圖效果"></li>
<li><img src="img/05.jpg" alt="jquery實現簡單自動輪播圖效果"></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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。