用jquery實(shí)現(xiàn)輪播圖效果
本文實(shí)例為大家分享了用jquery實(shí)現(xiàn)輪播圖的具體代碼,供大家參考,具體內(nèi)容如下
(帶小圓點(diǎn)和左右箭頭切換效果的)
原理:定義索引,定時任務(wù)實(shí)現(xiàn)輪播切換,切換時同樣需要切換小圓點(diǎn)的樣式
var j = 0;//定義索引,圖片和小圓點(diǎn)共用 var cusTimer;//定義定時函數(shù) $('.cons-middle .cons-mid').eq(0).show().siblings().hide();//定義默認(rèn)的顯示圖片,也就是索引為0的那張圖片 cusStart();//開始實(shí)現(xiàn)圖片輪播,用到了定時器 $('.luobo-circle li').hover(function(){//當(dāng)鼠標(biāo)運(yùn)動到某個小圓點(diǎn)是,切換圖片 clearInterval(cusTimer);//并且清除定時 j=$(this).index();//獲取當(dāng)前鼠標(biāo)運(yùn)動到的小圓點(diǎn)的索引 cusChange();//執(zhí)行切換圖片的函數(shù) }); $('.luobo-circle li').mouseleave(function(){ cusStart();//定義當(dāng)鼠標(biāo)離開小圓點(diǎn)時繼續(xù)執(zhí)行定時函數(shù),輪播開始 }); $('.cons-left img').click(() => { j--; if (j < 0) { j = 3; }; cusChange(); $('.luobo-circle li').eq(j).css('background-color','#4C80E7') $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3'); }); $('.cons-right img').click(() => { j++; if (j > 3) { j = 0; } cusChange(); $('.luobo-circle li').eq(j).css('background-color','#4C80E7') $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3'); }) function cusStart(){//輪播開始函數(shù) cusTimer = setInterval(function(){//自動輪播定時函數(shù) j++;//索引進(jìn)行累加,防止圖片只顯示一張 if(j==4){ j=0;//我這里是用的8張圖片,當(dāng)索引為8時,圖片沒有了,將索引清零 } cusChange();//繼續(xù)執(zhí)行圖片輪播 },5000)//2000是多久切換一次圖片,表示兩秒 }; function cusChange(){//圖片顯示函數(shù),這里的fadeOut和fadeIn是圖片顯示方式是淡入淡出 $('.cons-middle .cons-mid').eq(j).fadeIn(300).siblings().stop().fadeOut(300); //eq選擇當(dāng)前圖片,siblings表示排除其他圖片,stop表示其他圖片停止切換,只切換當(dāng)前圖片 $('.luobo-circle li').eq(j).css('background-color','#4C80E7') $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3'); }
(無小圓點(diǎn),僅自動輪播及左右切換)
//首頁banner輪播 var i = 0; var bannerTimer; function bannerChange(){//圖片顯示函數(shù),這里的fadeOut和fadeIn是圖片顯示方式是淡入淡出 $('.banner ul li').eq(i).fadeIn(300).siblings().stop().fadeOut(300); } function bannerStart(){//輪播開始函數(shù) bannerTimer = setInterval(function(){//自動輪播定時函數(shù) i++; if(i==2){ i=0; } bannerChange(); },3000) }; $('.banner ul li').eq(0).show().siblings().hide(); bannerStart(); $('.pagination .prev').click(() => { i--; if (i < 0) { i = 2; }; bannerChange(); }); $('.pagination .next').click(() => { i++; if (i > 2) { i = 0; } bannerChange(); });
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用jQuery監(jiān)聽掃碼槍輸入并禁止手動輸入的實(shí)現(xiàn)方法(推薦)
基于jQuery的掃碼槍監(jiān)聽。如果只是想實(shí)現(xiàn)監(jiān)聽獲取條碼掃碼信息,可以直接拿來使用,如果有更多的條碼判斷處理邏輯需要自己擴(kuò)展哦2017-03-03jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果,以完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)針對頁面元素的遍歷及樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-09-09關(guān)于jquery動態(tài)增減控件的一些想法和小插件
這段代碼壓縮到100行內(nèi),而且擴(kuò)展方便,可以非常輕松的增減控件的數(shù)量,使用非常簡單。2010-08-08jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可自動判斷位置的彈出層效果代碼,可實(shí)現(xiàn)根據(jù)鼠標(biāo)位置進(jìn)行合理的判斷并顯示彈出層的功能,涉及jQuery鼠標(biāo)事件及頁面元素位置屬性的相關(guān)判定技巧,需要的朋友可以參考下2015-10-10原生javascript實(shí)現(xiàn)的分頁插件pagenav
這幾天要做一個前臺頁面,涉及到分頁,不想自己去寫所以在網(wǎng)上找jquery看有沒有好用一點(diǎn)的分頁組件,結(jié)果發(fā)現(xiàn)有很多,但是都很麻煩,看到了這個叫pagenav的發(fā)現(xiàn)相對來說還是很容易上手的,于是就直接用了,在我看來,能解決問題的辦法就是好辦法.越簡單越好.2014-08-08Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
要求選擇“地區(qū)”及“代維公司”后,刷新第一個DataGrid框體,下面為大家介紹下如何清空J(rèn)query下EasyUI組件中的DataGrid結(jié)果集2014-01-01Jquery遍歷checkbox獲取選中項value值的方法
這篇文章主要介紹了Jquery遍歷checkbox獲取選中項的value值,需要的朋友可以參考下2014-02-02