轮播图 左右点击及底部小圆点

最近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啦  代码分享完毕，希望可以帮助到各位小可耐们