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