图片轮播

 页面代码

<div class="banner">
    <div class="carousel-content">
        <ul class="carousel">
            <li><img src="images/html_1.jpg"></li>
            <li><img src="images/html_2.jpg"></li>
            <li><img src="images/html_3.jpg"></li>
            <li><img src="images/html_4.jpg"></li>
            <li><img src="images/html_5.jpg"></li>
        </ul>
        <ul class="img-index"></ul>
        <div class="carousel-prev"><img src="./images/left1.png"></div>
        <div class="carousel-next"><img src="./images/right1.png"></div>
    </div>
</div>
<script>
    $(function () {
        $(".carousel-content").carousel({
            carousel: ".carousel",//轮播图容器
            indexContainer: ".img-index",//下标容器
            prev: ".carousel-prev",//左按钮
            next: ".carousel-next",//右按钮
            timing: 3000,//自动播放间隔
            animateTime: 700,//动画时间
            autoPlay: true,//是否自动播放 true/false
            direction: "left",//滚动方向 right/left
        });
        $(".carousel-content").hover(function () {
            $(".carousel-prev,.carousel-next").fadeIn(300);
        }, function () {
            $(".carousel-prev,.carousel-next").fadeOut(300);
        });

        $(".carousel-prev").hover(function () {
            $(this).find("img").attr("src", "images/left2.png");
        }, function () {
            $(this).find("img").attr("src", "images/left1.png");
        });
        $(".carousel-next").hover(function () {
            $(this).find("img").attr("src", "images/right2.png");
        }, function () {
            $(this).find("img").attr("src", "images/right1.png");
        });
    });
</script>

css样式

/*banner*/
.banner {
    --mywidth: 1200px;
    --myheight: 600px;
}

.carousel-content {
    margin: 0 auto;
    width: var(--mywidth);
    height: var(--myheight);
    position: relative;
    overflow: hidden;
    /*border-radius: 10px*/
}

.carousel {
    height: var(--myheight);
    position: absolute
}

.carousel li {
    float: left
}

.carousel li, .carousel li img {
    width: var(--mywidth);
    height: var(--myheight)

}

.img-index {
    position: absolute;
    bottom: 8px;
    width: 100%;
    display: flex;
    justify-content: center
}

.img-index li {
    float: left;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, .2);
    font-size: 12px;
    cursor: pointer;
    margin: 0 3px;
    color: #fff
}

.img-index li.js_index, .img-index li:hover {
    background-color: rgba(0, 0, 0, .7)
}

.carousel-prev, .carousel-next {
    position: absolute;
    display: inline-block;
    top: 45%;
    cursor: pointer;
    display: none
}

.carousel-prev {
    left: 0
}

.carousel-next {
    right: 0
}

jQuery引入

;(function ($) {
    $.fn.carousel = function (param) {
        var carousel = param.carousel, indexContainer = param.indexContainer, list = $(carousel).children("li"),
            len = list.length, prev = param.prev, next = param.next, timing = param.timing,
            animateTime = param.animateTime, autoPlay = param.autoPlay, timer, index = 1, indexList,
            indexClassName = "js_index", action = true, totalWidtn = list.width() * (list.length + 2),
            direction = param.direction;
        for (var i = 1; i <= list.length; i++) {
            $(indexContainer).append("<li>" + i + "</li>")
        }
        $(carousel).width(totalWidtn).append($(list[0]).clone()).prepend($(list[list.length - 1]).clone()).css("left", "-" + list.width() + "px");
        list = $(carousel).children("li");
        indexList = $(indexContainer).children("li");
        $(indexList[index - 1]).addClass(indexClassName);
        if (autoPlay) {
            startTiming();
            $(carousel + "," + prev + "," + next + "," + indexContainer).hover(function () {
                window.clearInterval(timer);
            }, function () {
                startTiming();
            });
        }

        function startTiming() {
            switch (direction) {
                case "right":
                    timer = window.setInterval("$.rightChangeImg();", timing);
                    break;
                case "left":
                    timer = window.setInterval("$.leftChangeImg();", timing);
                    break;
                default:
                    timer = window.setInterval("$.leftChangeImg();", timing);
            }
        };$.extend({
            changeIndex: function (index) {
                $(indexList).removeClass(indexClassName);
                $(indexList[index]).addClass(indexClassName);
            }
        });
        $.extend({
            leftChangeImg: function () {
                action = false;
                if (index == len) {
                    index = 0;
                    $(carousel).stop(true, true).css("left", "0px");
                }
                index++;
                $(carousel).stop(true, true).animate({left: "-=" + list.width() + "px"}, animateTime);
                setTimeout(function () {
                    if (index == len) {
                        index = 0;
                        $(carousel).stop(true, true).css("left", "0px");
                    }
                    action = true;
                }, animateTime);
                $.changeIndex(index - 1);
            }
        });
        $.extend({
            rightChangeImg: function () {
                action = false;
                if (index == 0) {
                    index = len;
                    $(carousel).stop(true, true).css("left", "-" + left + "px");
                }
                index--;
                var left = totalWidtn - list.width() * 2;
                $(carousel).stop(true, true).animate({left: "+=" + list.width() + "px"}, animateTime);
                setTimeout(function () {
                    if (index == 0) {
                        index = len;
                        $(carousel).stop(true, true).css("left", "-" + left + "px");
                    }
                    action = true;
                }, animateTime);
                if (index == 0) {
                    $.changeIndex(len - 1);
                } else {
                    $.changeIndex(index - 1);
                }
            }
        });
        $(next).on("click", function () {
            var nowLeft = Math.abs(parseInt($(carousel).css("left")));
            var left = totalWidtn - list.width() * 2;
            if (action) {
                if (nowLeft == left) {
                    index = 0;
                    $(carousel).stop(true, true).css("left", "0px");
                }
                $.leftChangeImg();
            }
        });
        $(prev).on("click", function () {
            var nowLeft = Math.abs(parseInt($(carousel).css("left")));
            var left = totalWidtn - list.width() * 2;
            if (action) {
                if (nowLeft == 0) {
                    index = len;
                    $(carousel).stop(true, true).css("left", "-" + left + "px");
                }
                $.rightChangeImg();
            }
        });
        indexList.on("click", function () {
            var no = $(this).index() + 1;
            if (action) {
                if (no > index) {
                    $.changeIndex(no - 1);
                    action = false;
                    var left = (no - index) * list.width();
                    index = no;
                    $(carousel).stop(true, true).animate({left: "-=" + left + "px"}, animateTime);
                    setTimeout(function () {
                        action = true;
                    }, animateTime);
                } else if (no < index) {
                    $.changeIndex(no - 1);
                    action = false;
                    var left = (index - no) * list.width();
                    index = no;
                    $(carousel).stop(true, true).animate({left: "+=" + left + "px"}, animateTime);
                    setTimeout(function () {
                        action = true;
                    }, animateTime);
                }
            }
        });
    }
})(jQuery);