jq实现轮播

html代码

                <!-- banner开始 -->
                <div class="banner">
                    <ul>
                        <li style="display: block;">
                            <img src="./images/banner.jpg" alt="">
                        </li>
                        <!-- <li>
                            <img src="./images/banner01.jpg" alt="">
                        </li> -->
                        <li>
                            <img src="./images/banner03.jpg" alt="">
                        </li>
                    </ul>
                    <span class="pre">&lt;</span>
                    <span class="next">&gt;</span>
                    <div class="dot">
                        <li style="background-color:#FE6500"></li>
                        <!-- <li></li> -->
                        <li></li>
                    </div>
                </div>
                <!-- banner结束 -->

css代码

/* 广告栏css开始 */

.banner {
    position: relative;
}

.banner>ul>li {
    display: none;
}

.banner>ul>li>img {
    width: 1080px;
}

.pre,
.next {
    display: inline-block;
    width: 64px;
    text-align: center;
    height: 64px;
    line-height: 64px;
    font-size: 60px;
    color: #fff;
    background-color: rgba(49, 99, 159, .1);
    cursor: pointer;
}

.pre {
    position: absolute;
    left: -3px;
    top: 50%;
    margin-top: -39px;
}

.next {
    position: absolute;
    right: -3px;
    top: 50%;
    margin-top: -39px;
}

.dot {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 26px;
    margin-left: -25px;
}

.dot>li {
    float: left;
    margin-right: 11px;
    width: 14px;
    height: 14px;
    background-color: #fff;
    border-radius: 14px;
    cursor: pointer;
}


/* 广告栏css结束 */

js代码

引入jq

        $(document).ready(function() {
            // 广告栏的幻灯片开始
            var index = 0;
            var len = $(".banner>ul>li").length;
            // 前一页
            $(".pre").on("click", function() {
                index--;
                if (index < 0) {
                    index = len - 1;
                }
                
                $(".banner>ul>li").eq(index).show().siblings().hide();
                $(".dot>li").eq(index).css("backgroundColor", "#FE6500").siblings().css(
                    "backgroundColor", "#FFF");
            });
            // 后一页
            $(".next").on("click", function() {
                index++;
                if (index > len - 1) {
                    index = 0;
                }
                $(".banner>ul>li").eq(index).show().siblings().hide();
                $(".dot>li").eq(index).css("backgroundColor", "#FE6500").siblings().css(
                    "backgroundColor", "#FFF");
            });

            function auto() {
                $(".next").click();
            }
            // 计时
            var s = setInterval(auto, 3000);
            $(".banner>ul>li,.pre,.next").on("mouseenter", function() {
                clearInterval(s);
            });
            $(".banner>ul>li,.pre,.next").on("mouseleave", function() {
                s = setInterval(auto, 3000);
            });
            // 点击下面的小圆点显示对应图片
            $(".dot>li").on("mouseenter", function() {
                i = $(this).index();
                $(".dot>li").eq(i).css("backgroundColor", "#FE6500");
            });
            $(".dot>li").on("mouseleave", function() {
                i = $(this).index();
                if (i != index) {
                    $(".dot>li").eq(i).css("backgroundColor", "#FFF");
                }

            });
            $(".dot>li").on("click", function() {
                clearInterval(s);
                index = $(this).index();
                $(".banner>ul>li").eq(index).show().siblings().hide();
                $(".dot>li").eq(index).css("backgroundColor", "#FE6500").siblings().css(
                    "backgroundColor", "#FFF");
            });

            // 广告栏的幻灯片结束