jquery實現(xiàn)簡單自動輪播圖效果
更新時間：2020年07月29日 14:05:46 作者：一像素的羈絆
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單自動輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)簡單自動輪播圖的具體代碼，供大家參考，具體內容如下
代碼：
<!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插件Echarts實現(xiàn)的漸變色柱狀圖
本文主要介紹了jQuery插件Echarts實現(xiàn)漸變色柱狀圖的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
在跟html+ashx打交道的園友們肯定會發(fā)現(xiàn)，這種模式雖然優(yōu)美，但在開發(fā)中會遇到一些難處理的地方。我也不例外，下面是自己在實際開發(fā)中總結出來的幾條經驗，希望跟大家分享，更希望得到大家的建議和更好的解決方法！2011-07-07
本文整理了一些常用的特效示例，如：.jQuery fadeIn() 用于淡入已隱藏的元素、jQuery fadeToggle()方法可以在 fadeIn()與 fadeOut()方法之間進行切換等等，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了jQuery短信驗證倒計時功能實現(xiàn)方法,實例分析了jQuery前臺倒計時功能及ajax交互的相關技巧,需要的朋友可以參考下2016-05-05
jQuery實現(xiàn)ToolTip元素定位顯示功能示例
這篇文章主要介紹了jQuery實現(xiàn)ToolTip元素定位顯示功能,結合實例形式分析了jQuery針對頁面元素屬性的動態(tài)操作相關技巧,需要的朋友可以參考下2016-11-11
JQuery頁面的表格數(shù)據(jù)的增加與分頁的實現(xiàn)
使用JQuery實現(xiàn)頁面的表格數(shù)據(jù)的增加與分頁，具體示例如下，喜歡的朋友可以參考下2013-12-12
jQuery對象就是通過jQuery包裝DOM對象后產生的對象。jQuery對象是jQuery獨有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對象；2010-03-03
這篇文章主要介紹了jQuery ajax分頁插件實例代碼的相關資料，本文介紹的非常詳細，具有參考借鑒價值，特此分享供大家學習2016-01-01
通過jquery toggleClass()屬性制作文章段落更改背景顏色
jQuery制作文章段落更改背景顏色屬性jquery toggleClass()屬性。文中給大家附實例代碼和源碼，感興趣的朋友參考下吧2018-05-05
jQuery實現(xiàn)注冊會員時密碼強度提示信息功能示例
這篇文章主要介紹了jQuery實現(xiàn)注冊會員時密碼強度提示信息功能,涉及jQuery事件響應及字符串的遍歷、運算與判斷等相關操作技巧,需要的朋友可以參考下2017-09-09