用jquery實現(xiàn)輪播圖效果
更新時間：2021年08月18日 17:10:31 作者：傾666
這篇文章主要為大家詳細介紹了用jquery實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了用jquery實現(xiàn)輪播圖的具體代碼，供大家參考，具體內容如下
（帶小圓點和左右箭頭切換效果的）
原理：定義索引，定時任務實現(xiàn)輪播切換，切換時同樣需要切換小圓點的樣式
var j = 0;//定義索引，圖片和小圓點共用
var cusTimer;//定義定時函數(shù)
$('.cons-middle .cons-mid').eq(0).show().siblings().hide();//定義默認的顯示圖片，也就是索引為0的那張圖片
cusStart();//開始實現(xiàn)圖片輪播，用到了定時器
$('.luobo-circle li').hover(function(){//當鼠標運動到某個小圓點是，切換圖片
clearInterval(cusTimer);//并且清除定時
j=$(this).index();//獲取當前鼠標運動到的小圓點的索引
cusChange();//執(zhí)行切換圖片的函數(shù)
});
$('.luobo-circle li').mouseleave(function(){
cusStart();//定義當鼠標離開小圓點時繼續(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++;//索引進行累加，防止圖片只顯示一張
if(j==4){
j=0;//我這里是用的8張圖片，當索引為8時，圖片沒有了，將索引清零
}
cusChange();//繼續(xù)執(zhí)行圖片輪播
},5000)//2000是多久切換一次圖片，表示兩秒
};
function cusChange(){//圖片顯示函數(shù)，這里的fadeOut和fadeIn是圖片顯示方式是淡入淡出
$('.cons-middle .cons-mid').eq(j).fadeIn(300).siblings().stop().fadeOut(300);
//eq選擇當前圖片，siblings表示排除其他圖片，stop表示其他圖片停止切換，只切換當前圖片
$('.luobo-circle li').eq(j).css('background-color','#4C80E7')
$('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
}
（無小圓點，僅自動輪播及左右切換）
//首頁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();
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于jquery的不規(guī)則矩形的排列實現(xiàn)代碼
現(xiàn)在很多網站都用不規(guī)則矩形來羅列圖片，ipad上面很多應該用也都是用的不規(guī)則的矩形，但是還要讓他們各自都靠近排列，不能有空隙2012-04-04
遮罩在某些情況下還是比較實用的，下面為大家介紹下如何為指定的元素添加遮罩層，感興趣的朋友可以了解下2014-01-01
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)輪播特效的相關資料，感興趣的小伙伴們可以參考一下2016-04-04
jQuery Selectors(選擇器)的使用(九、表單對象屬性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實例方式進行講述，以簡單，全面為基礎，不會涉及很深，我的學習方法：先入門，后進階！2009-12-12
jQuery實現(xiàn)打開頁面漸現(xiàn)效果示例
這篇文章主要介紹了jQuery實現(xiàn)打開頁面漸現(xiàn)效果的方法,結合實例形式分析了jQuery樣式操作及頁面元素的漸變效果實現(xiàn)技巧,需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了多種jQuery綁定事件的實現(xiàn)方式，分享了jQuery防止重復綁定事件的解決方法，感興趣的小伙伴們可以參考一下2016-06-06
本篇文章是對文件編碼導致jquery失效的解決方法進行了詳細的分析介紹，需要的朋友參考下2013-06-06
可以讓指定的層浮動到網頁上的任何位置，當滾動條滾動時它會保持在當前位置不變，不會產生閃動2008-12-12
jQuery DateTimePicker 日期和時間插件示例
jQuery UI很強大，其中的日期選擇插件Datepicker是一個配置靈活的插件，這篇文章主要介紹了jQuery DateTimePicker 日期和時間插件示例，有興趣的可以了解一下。2017-01-01
Jquery刷新頁面背景圖片隨機變換的實現(xiàn)方法，需要的朋友可以參考一下2013-03-03