jquery轮播图

css代码块

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.adver {
    margin: 0 auto;
    width: 700px;
    overflow: hidden;
    height: 454px;
    position: relative;
    background: url("../image/j05.a03/adver01.jpg");
}

ul {
    position: absolute;
    bottom: 10px;
    z-index: 100;
    width: 100%;
    text-align: center;
}

ul li {
    display: inline-block;
    font-size: 10px;
    line-height: 20px;
    font-family: "微软雅黑";
    margin: 0 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #333333;
    text-align: center;
    color: #ffffff;
}

.arrowLeft,
.arrowRight {
    position: absolute;
    width: 30px;
    background: rgba(0, 0, 0, 0.2);
    height: 50px;
    line-height: 50px;
    text-align: center;
    top: 200px;
    z-index: 150;
    font-family: "微软雅黑";
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}

.arrowLeft {
    left: 10px;
}

.arrowRight {
    right: 10px;
}

li:nth-of-type(1) {
    background: orange;
}

---

jq代码块

<script src="../jq/jquery-3.3.1.js"></script>
    <script>
        var num = 1;
        var time = null;

        $(function () {
            //鼠标移入图片，显示左右按键
            $(".adver").mouseover(function () {
                $(".arrowLeft,.arrowRight").show();
            });
            //鼠标移出图片，隐藏左右按键
            $(".adver").mouseout(function () {
                $(".arrowLeft,.arrowRight").hide();
            });
        });

        //定义数组保存图片
        function getImage(num) {
            var imgArr = new Array();
            for (var i = 0; i <= 5; i++) {
                imgArr[i] = "image/j05.a03/adver0" + (i + 1) + ".jpg";
            }
            return imgArr[num - 1];
        }

        $(function () {
            //单击左键手动轮播，自动选择改变图片
            $(".arrowLeft").click(function () {
                num--;
                switchPic(num);
            });
            //单击右键手动轮播，自动选择改变图片
            $(".arrowRight").click(function () {
                num++;
                switchPic(num);
            });

            //将鼠标移入的I指针样式转换成手的指针样式
            $(".adver ul li").css("cursor", "pointer");

            //鼠标移入轮播停止，鼠标离开轮播开始（li）   
            $(".adver ul li").mouseover(function () {
                stopSwitch();
                var strNum = $(this).text();
                var vNum = parseInt(strNum);
                switchPic(vNum);
            });
            $(".adver ul li").mouseout(function () {
                var strNum = $(this).text();
                var vNum = parseInt(strNum);
                num = vNum;
                startSwitch();
            });

            //鼠标移入轮播停止，鼠标离开轮播开始（左右键）
            $(".arrowLeft").mouseover(function () {
                stopSwitch();
            });
            $(".arrowLeft").mouseout(function () {
                startSwitch();
            });

            $(".arrowRight").mouseover(function () {
                stopSwitch();
            });
            $(".arrowRight").mouseout(function () {
                startSwitch();
            });

        });

        function switchPic(number) {
            //判断图片是否到第一张，是的话接下来图片跳到最后一张
            if (number < 1) {
                number = 6;
            }
            //判断图片是否到最后一张，是的话接下来图片跳到第一张
            if (number > 6) {
                number = 1;
            }
            num = number;
            $(".adver").css("backgroundImage", "url(" + getImage(number) + ")");
            //改变所有的li背景颜色以及字体颜色
            $("li").css({ "backgroundColor": "#333333", "color": "white" });
            //改变eq对应的当前li背景颜色以及字体颜色
            $("li:eq(" + (number - 1) + ")").css({ "backgroundColor": "#FFA403", "color": "white" });
        }

        //自动轮播，当轮播到最后一张图片时会自动跳转到第一张图片
        function autoSwitch() {
            num++;
            if (num > 6) {
                num = 1;
            }
            switchPic(num);
        }

        //自动轮播停止和开始
        function startSwitch() {
            time = setInterval('autoSwitch()', 500);
        }
        function stopSwitch() {
            clearInterval(time);
        }

        //点开网页自动轮播
        $(function () {
            startSwitch();
        });

    </script>

---

html代码块

<div class="adver">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div class="arrowLeft">&lt;</div>
        <div class="arrowRight">&gt;</div>
        </div>