快捷導(dǎo)航

用jquery實(shí)現(xiàn)輪播圖效果

更新時(shí)間：2021年08月18日 17:10:31 作者：傾666

這篇文章主要為大家詳細(xì)介紹了用jquery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了用jquery實(shí)現(xiàn)輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

（帶小圓點(diǎn)和左右箭頭切換效果的）

原理：定義索引，定時(shí)任務(wù)實(shí)現(xiàn)輪播切換，切換時(shí)同樣需要切換小圓點(diǎn)的樣式

 var j = 0;//定義索引，圖片和小圓點(diǎn)共用
        var cusTimer;//定義定時(shí)函數(shù)
        $('.cons-middle .cons-mid').eq(0).show().siblings().hide();//定義默認(rèn)的顯示圖片，也就是索引為0的那張圖片
        cusStart();//開(kāi)始實(shí)現(xiàn)圖片輪播，用到了定時(shí)器
        $('.luobo-circle li').hover(function(){//當(dāng)鼠標(biāo)運(yùn)動(dòng)到某個(gè)小圓點(diǎn)是，切換圖片
            clearInterval(cusTimer);//并且清除定時(shí)
            j=$(this).index();//獲取當(dāng)前鼠標(biāo)運(yùn)動(dòng)到的小圓點(diǎn)的索引
            cusChange();//執(zhí)行切換圖片的函數(shù)
        });
        $('.luobo-circle li').mouseleave(function(){
            cusStart();//定義當(dāng)鼠標(biāo)離開(kāi)小圓點(diǎn)時(shí)繼續(xù)執(zhí)行定時(shí)函數(shù)，輪播開(kāi)始
        });
        
        $('.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(){//輪播開(kāi)始函數(shù)
            cusTimer = setInterval(function(){//自動(dòng)輪播定時(shí)函數(shù)
                j++;//索引進(jìn)行累加，防止圖片只顯示一張
                if(j==4){
                    j=0;//我這里是用的8張圖片，當(dāng)索引為8時(shí)，圖片沒(méi)有了，將索引清零
                }
                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');
        }

（無(wú)小圓點(diǎn)，僅自動(dòng)輪播及左右切換）

//首頁(yè)banner輪播
    var i = 0;
    var bannerTimer;
    function bannerChange(){//圖片顯示函數(shù)，這里的fadeOut和fadeIn是圖片顯示方式是淡入淡出
        $('.banner ul li').eq(i).fadeIn(300).siblings().stop().fadeOut(300);
    }
    function bannerStart(){//輪播開(kāi)始函數(shù)
        bannerTimer = setInterval(function(){//自動(dòng)輪播定時(shí)函數(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();
    });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: