jquery 简单轮播图运用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>京东轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .slider {
            height: 340px;
            width: 790px;
            margin: 100px auto;
            position: relative;
        }
        /*#ul{*/
            /*overflow: hidden;*/
        /*}*/
        .slider #ul li {
            position: absolute;
            display: none;
        }

        .slider #ul li:first-child {
            display: block;
        }

        .arrow {
            display: none;
        }

        .slider:hover .arrow {
            display: block;
        }

        .arrow-left,
        .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }

        .arrow-left:hover,
        .arrow-right:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        .arrow-left {
            left: 0;
        }

        .arrow-right {
            right: 0;
        }
        #xyd{
            /*width: 200px;*/
            height: 25px;
            position: absolute;
            bottom: 10px;
            right: 10px;

        }
        #xyd li{
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            list-style: none;
            margin: 0 5px;
            float: left;
            background-color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="slider">
    <ul id="ul">
        <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
    </ul>
    <ul id="xyd">

    </ul>
    <!--箭头-->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
</div>

<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var index=0;
        $(".arrow-left").click(function () {
            index--;
            if (index<0){
                index=7;
            }
            console.log(index);
            $("li").eq(index).show().siblings("li").hide();
            $("#xyd>li").eq(index).css("backgroundColor","red").siblings("li").css("backgroundColor","");
        })
        $(".arrow-right").click(function () {
            index++;
            if (index>7){
                index=0;
            }
            console.log(index);
            $("li").eq(index).show().siblings("li").hide();
            $("#xyd>li").eq(index).css("backgroundColor","red").siblings("li").css("backgroundColor","");
        })

        /*小圆点*/
        for (var i=0;i<$("#ul>li").length;i++){
            $("#xyd>li").eq(index).css("backgroundColor","red");
            $("<li></li>").appendTo("#xyd").text(i+1);
            var list=$("#xyd>li");
            $(list).mouseenter(function () {
                index=$(this).index();
                $("#xyd>li").eq(index).css("backgroundColor","red").siblings("li").css("backgroundColor","");
                $("#ul>li").eq(index).show().siblings("li").hide();
            })
        }


        var timeId=setInterval(move,1000);
        $(".slider").mouseenter(function () {
            clearInterval(timeId);
        })
        $(".slider").mouseleave(function () {
            timeId=setInterval(move,1000)
        })

        function move() {
            index++;
            // console.log(index);
            if (index==8) {
                index=0
            }
            $("li").eq(index).show().siblings("li").hide();
            $("#xyd>li").eq(index).css("backgroundColor","red").siblings("li").css("backgroundColor","");
        }
    })


</script>

</body>
</html>
jquery 简单轮播图 运用

jquery 简单轮播图运用
