用jQuery實(shí)現(xiàn)圓點(diǎn)圖片輪播效果
圖片輪播效果 :
在頁(yè)面的指定位置實(shí)現(xiàn)的圖片自動(dòng)的左右輪流切換展示,效果為無縫連接;
點(diǎn)擊圖片左下的標(biāo)簽(或中間的小圓點(diǎn))切換到對(duì)應(yīng)的圖片;
點(diǎn)擊圖片的左右切換標(biāo)簽;
整體思路 :
--------------------------------------------------------------------------------
自動(dòng)輪播: 將一個(gè)用于放置圖片素材的與顯示框同高度的大div放入顯示框,將圖片素材放入大的div中,通過jquery的animate()方法改變大div相對(duì)于顯示框絕對(duì)位置的left值及變化時(shí)間實(shí)現(xiàn)圖片的滑動(dòng);使用setInterval()方法設(shè)置定時(shí)器,達(dá)到自動(dòng)播放效果;無縫連續(xù)播放的重點(diǎn)在于,第一張圖片與最后一張圖片要相同,這樣播放完最后一張圖片后將大div框的left設(shè)定為初始值,再將與圖片索引相同的變量設(shè)定為1(第二張),這樣就能達(dá)到無縫連續(xù)滑動(dòng)效果;
--------------------------------------------------------------------------------
點(diǎn)擊標(biāo)簽切換到對(duì)應(yīng)圖片: 對(duì)點(diǎn)擊切換圖片的li標(biāo)簽添加鼠標(biāo)點(diǎn)擊事件,若存在定時(shí)器的先清除,使用$(this).Index()獲取當(dāng)前點(diǎn)擊圖片的序號(hào)(索引),將大div的left值設(shè)置為當(dāng)前圖片位置的值,同時(shí)別忘了將當(dāng)前l(fā)i標(biāo)簽設(shè)置深顏色的明顯效果,其他li標(biāo)簽設(shè)置初始效果;在事件中設(shè)置倒計(jì)時(shí),當(dāng)鼠標(biāo)點(diǎn)擊后一段時(shí)間不進(jìn)行其他操作,則恢復(fù)自動(dòng)播放的定時(shí)器;
--------------------------------------------------------------------------------
點(diǎn)擊向左向右標(biāo)簽切換到上/下一張圖片: 該標(biāo)簽使用< a >標(biāo)簽達(dá)到效果更好(防止連續(xù)點(diǎn)擊時(shí)產(chǎn)生選中頁(yè)面變藍(lán)的現(xiàn)象),先獲取點(diǎn)擊時(shí)圖片的編號(hào),此時(shí)不能使用$(this).Index(),因?yàn)榇藭r(shí)this指代的對(duì)象為左右切換標(biāo)簽,而不是圖片對(duì)象,還記得上面那個(gè)與圖片索引相同的變量嗎?我們需要一開始就設(shè)定它為全局變量(我將它起名為rcd),它的值相當(dāng)于是和圖片,li標(biāo)簽一起綁定的,在還沒有點(diǎn)擊向左向右標(biāo)簽時(shí),圖片是在輪播的,rcd變量中存著當(dāng)前圖片的序號(hào),因此,盡管用不了this,我們可以用rcd+1/-1找到向右滑/向左劃的圖片編號(hào),有了編號(hào),就可以知道大div需要運(yùn)動(dòng)到的位置,和設(shè)置左下方的標(biāo)簽顯示狀態(tài)了.當(dāng)rcd-1==-1時(shí),將div的位置設(shè)置為最后一張圖片顯示的位置,然后將rcd設(shè)置為倒數(shù)第二張圖片對(duì)應(yīng)的編號(hào);當(dāng)rcd+1比最后一張還多一時(shí),將div的位置設(shè)置為第一張圖片顯示的位置,將rcd設(shè)置為第二張圖片對(duì)應(yīng)的編號(hào)即可.
--------------------------------------------------------------------------------
代碼實(shí)現(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標(biāo)簽編號(hào)的全局變量
// 滑動(dòng)函數(shù)
function slide(){
rcd++;
if(rcd==4){ //右滑倒最后一張時(shí),將圖片設(shè)定為第一張的位置,即將滑動(dòng)的圖片設(shè)定為第二張(rcd=1)
$('#sld').css({'left':'0'});
rcd=1;
};
var dis = rcd*(-1210)+'px'; //這里的1210是每張圖片的寬度,rcd和dis的關(guān)系就是編號(hào)和div left值的關(guān)系
$('#sld').stop().animate({'left':dis},1000) //設(shè)定left
if (rcd==3) { //當(dāng)切換到最后一張時(shí)(一共4張圖片),將左下方的標(biāo)簽樣式也改成與第一張一樣的
$('#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è)定定時(shí)器,開始輪播
var timer = setInterval(slide,2000);
var st; //聲明倒計(jì)時(shí)函數(shù)變量名
// 綁定li鼠標(biāo)點(diǎn)擊事件
$('#fix ul li').click(function(){
clearInterval(timer); //清除定時(shí)器(同下一行)
clearTimeout(st);
var rcd = $(this).index(); //獲得點(diǎn)擊的li的編號(hào)
var dis =rcd*(-1210)+'px'; //獲得該編號(hào)對(duì)應(yīng)的div的left值
$('#sld').stop().animate({'left':dis},500) //開始運(yùn)動(dòng)
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //設(shè)置當(dāng)前l(fā)i樣式,其他li變?yōu)槌跏贾?
st = setTimeout(function(){ //設(shè)置定時(shí)器,若3秒內(nèi)沒有鼠標(biāo)點(diǎn)擊操作,就重新設(shè)置輪播定時(shí)器
timer = setInterval(slide,2000);
},3000)
});
// 左圖標(biāo)點(diǎn)擊事件
$('#fix .lt').click(function(){
clearInterval(timer);
clearTimeout(st);
rcd--; //點(diǎn)擊前的編號(hào)-1
if(rcd==-1){ //如果rcd減后值為-1,那么將div的left設(shè)置為最后一張圖顯示的值,并將rcd設(shè)置為倒數(shù)第二張的編號(hào)
$('#sld').css({'left':'-3630px'});
rcd=2;
};
var dis = rcd*(-1210)+'px';
$('#sld').stop().animate({'left':dis},1000) //運(yùn)動(dòng)
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)
})
// 右圖標(biāo)點(diǎn)擊事件
$('#fix .rt').click(function(){
clearInterval(timer);
clearTimeout(st);
slide(); //右圖標(biāo)點(diǎn)擊一次與滑動(dòng)函數(shù)一致
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 給#fix div加鼠標(biāo)移入事件
$('#fix').mouseenter(function(){
$('#fix a').css({'display':'block'}); //鼠標(biāo)移入時(shí),向左向右圖標(biāo)顯示
})
// 給#fix div加鼠標(biāo)移出事件
$('#fix').mouseleave(function(){
$('#fix a').css({'display':'none'}); //鼠標(biāo)移出時(shí),向左向右圖標(biāo)隱藏
})
})
</script>
</head>
<body>
<div id="fix">
<div id="sld">
<img src="輪播圖/ph1.png"/>
<img src="輪播圖/ph2.jpg"/>
<img src="輪播圖/ph3.jpg"/>
<img src="輪播圖/ph1.png"/>
</div>
<ul>
<li style="opacity: 0.6;">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> //阻止瀏覽器的默認(rèn)跳轉(zhuǎn)
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img src="輪播圖/right.png"/></a>
</div>
</body>
也可以在我的Github上克隆這個(gè)效果的完整代碼: https://github.com/Getthrough/Image-Carousel
以上所述是小編給大家介紹的用jQuery實(shí)現(xiàn)圓點(diǎn)圖片輪播效果，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
- jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果示例
- 使用JQuery實(shí)現(xiàn)圖片輪播效果的實(shí)例(推薦)
- jQuery的圖片輪播插件PgwSlideshow使用詳解
- jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動(dòng)切換效果
- jQuery插件實(shí)現(xiàn)圖片輪播特效
- jQuery實(shí)現(xiàn)圖片輪播效果代碼(基于jquery.pack.js插件)
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- 原生js和jquery實(shí)現(xiàn)圖片輪播淡入淡出效果
- jQuery實(shí)現(xiàn)的3D版圖片輪播示例【滑動(dòng)輪播】
相關(guān)文章
jQuery.ajax 跨域請(qǐng)求webapi設(shè)置headers的解決方案
需要通過服務(wù)器端設(shè)置響應(yīng)頭、正確響應(yīng)options請(qǐng)求，正確設(shè)置 JavaScript端需要設(shè)置的headers信息方能實(shí)現(xiàn)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jquery實(shí)現(xiàn)tr元素的上下移動(dòng)示例代碼
讓tr元素的上下移動(dòng)的方法有很多，本文為大家介紹下使用jquery是實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-12-12
本文給大家講解關(guān)于此jQuery驗(yàn)證的一些標(biāo)記以及使用方法，非常不錯(cuò)，具有參考借鑒借鑒價(jià)值，需要的朋友參考下2017-01-01
JQuery的AJAX實(shí)現(xiàn)文件下載的小例子
JQuery的ajax函數(shù)的返回類型只有xml、text、json、html等類型，沒有“流”類型，所以我們要實(shí)現(xiàn)ajax下載，不能夠使用相應(yīng)的ajax函數(shù)進(jìn)行文件下載。但可以用js生成一個(gè)form，用這個(gè)form提交參數(shù)，并返回“流”類型的數(shù)據(jù)。在實(shí)現(xiàn)過程中，頁(yè)面也沒有進(jìn)行刷新2013-05-05
DIV外區(qū)域Click后關(guān)閉DIV的實(shí)現(xiàn)代碼
首先看下JS的事件模型，JS事件模型為向上冒泡，如onclick事件在某一DOM元素被觸發(fā)后，事件將跟隨節(jié)點(diǎn)向上傳播，直到有click事件綁定在某一父節(jié)點(diǎn)上，如果沒有將直至文檔的根2011-12-12
使用jquery的朋友對(duì)其中的on方法并不陌生吧，下面為大家介紹下此方法的具體使用，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)擲骰子游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
本文介紹了Jquery頁(yè)面初始化的4種方式的實(shí)例代碼，需要的朋友可以看下2016-11-11
jquery實(shí)現(xiàn)文本框數(shù)量加減功能的例子分享
在做商城項(xiàng)目的時(shí)候，需要在購(gòu)物車中增加一個(gè)商品加減功能，并在加減時(shí)同時(shí)修改總價(jià)格的顯示，并且保證文本框text只能輸入純數(shù)字2014-05-05
下面小編就為大家?guī)硪黄钊肜斫釰Query循環(huán)綁定事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06