溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“怎么使用jQuery實現圓點圖片輪播效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么使用jQuery實現圓點圖片輪播效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
代碼實現如下 :
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> //引入jquery (css代碼未貼)
<script type="text/javascript">
$(function(){
var rcd=0; //代表圖片和li標簽編號的全局變量
// 滑動函數
function slide(){
rcd++;
if(rcd==4){ //右滑倒最后一張時,將圖片設定為第一張的位置,即將滑動的圖片設定為第二張(rcd=1)
$('#sld').css({'left':'0'});
rcd=1;
};
var dis = rcd*(-1210)+'px'; //這里的1210是每張圖片的寬度,rcd和dis的關系就是編號和div left值的關系
$('#sld').stop().animate({'left':dis},1000) //設定left
if (rcd==3) { //當切換到最后一張時(一共4張圖片),將左下方的標簽樣式也改成與第一張一樣的
$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}else{
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //不是最后一張那么就正常執行
}
}
// 設定定時器,開始輪播
var timer = setInterval(slide,2000);
var st; //聲明倒計時函數變量名
// 綁定li鼠標點擊事件
$('#fix ul li').click(function(){
clearInterval(timer); //清除定時器(同下一行)
clearTimeout(st);
var rcd = $(this).index(); //獲得點擊的li的編號
var dis =rcd*(-1210)+'px'; //獲得該編號對應的div的left值
$('#sld').stop().animate({'left':dis},500) //開始運動
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //設置當前li樣式,其他li變為初始值
st = setTimeout(function(){ //設置定時器,若3秒內沒有鼠標點擊操作,就重新設置輪播定時器
timer = setInterval(slide,2000);
},3000)
});
// 左圖標點擊事件
$('#fix .lt').click(function(){
clearInterval(timer);
clearTimeout(st);
rcd--; //點擊前的編號-1
if(rcd==-1){ //如果rcd減后值為-1,那么將div的left設置為最后一張圖顯示的值,并將rcd設置為倒數第二張的編號
$('#sld').css({'left':'-3630px'});
rcd=2;
};
var dis = rcd*(-1210)+'px';
$('#sld').stop().animate({'left':dis},1000) //運動
if (rcd==3) { //與前面相同
$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}else{
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 右圖標點擊事件
$('#fix .rt').click(function(){
clearInterval(timer);
clearTimeout(st);
slide(); //右圖標點擊一次與滑動函數一致
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 給#fix div加鼠標移入事件
$('#fix').mouseenter(function(){
$('#fix a').css({'display':'block'}); //鼠標移入時,向左向右圖標顯示
})
// 給#fix div加鼠標移出事件
$('#fix').mouseleave(function(){
$('#fix a').css({'display':'none'}); //鼠標移出時,向左向右圖標隱藏
})
})
</script>
</head>
<body>
<div id="fix">
<div id="sld">
<img src="輪播圖/ph2.png"/>
<img src="輪播圖/ph3.jpg"/>
<img src="輪播圖/ph4.jpg"/>
<img src="輪播圖/ph2.png"/>
</div>
<ul>
<li >iPhone6</li>
<li>Mate9</li>
<li>vivo X9</li>
</ul>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="lt"><img src="輪播圖/left.png"/></a> //阻止瀏覽器的默認跳轉
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img src="輪播圖/right.png"/></a>
</div>
</body>讀到這里，這篇“怎么使用jQuery實現圓點圖片輪播效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
