輪播圖 左右點擊及底部小圓點

最近pc項目有兩處一樣的輪播圖  有左右點擊按鈕及底部小圓點

接下來 代碼奉上：

css的寫法，可以讓子元素根據父元素定位，讓它們定位在同一位置，再給子元素根據順序加上z-index值，第一個最大，一次減小；

左右兩側點擊按鈕直接根據父元素定位，z-index值最大；

js代碼如下：

// 輪播圖
const Banner = function () {
    const left = $('#clickLeft')
    const right = $('#clickRight')
    var items = $('#banner .cost-item');
    var points =  $('#clickPoint').children();

    Move(left,right,items,points)
}
const BannerMuch = function () {
    const left = $('#MuchLeft')
    const right = $('#MuchRight')
    var items = $('.use-box .hist');
    var points =  $('#MuchPoint').children();

    Move(left,right,items,points)
}
function Move(left,right,items,dots) {
    var index = 0;
    var str = 0;
    var len = items.length;
    //點擊左側按鈕的函數
    left.click(function(){
        $(dots).removeClass("check-point");
        if(str === 0){
            $(items[str]).fadeOut(300);
            str = len-1;
            $(items[str]).fadeIn(300);
            $(dots[str]).addClass("check-point");
            index = str;

        }else{
            $(items[str]).fadeOut(300);
            str --;
            $(items[str]).fadeIn(300);
            $(dots[str]).addClass("check-point");
            index = str;
        }
    });
    //點擊右側按鈕的函數
    right.click(function(){
        $(dots).removeClass("check-point");
        if(str === len-1){
            $(items[str]).fadeOut(300);
            str = 0;
            $(items[str]).fadeIn(300);
            $(dots[str]).addClass("check-point");
            index = str;
        }else{
            $(items[str]).fadeOut(300);
            str ++;
            $(items[str]).fadeIn(300);
            $(dots[str]).addClass("check-point");
            index = str;
        }
    })
}
Banner()
BannerMuch()

我這個是底部小圓點不帶點擊效果的 ，如果想要小圓點也要點擊效果的話那可以參照下面的代碼：

//小圓點
                $(".dot span").click(function(){
                    var num = $(this).index();
                    $(dots).removeClass("active");
                    $(dots[num]).addClass("active");
                    $(items).fadeOut(1500);
                    $(items[num]).fadeIn(1500);
                    index = num;
                })

ok啦  代碼分享完畢，希望可以幫助到各位小可耐們