jquery实现轮播图

jquery实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>轮播图</title>
    <style>
         .outer {
             width: 790px;
             height: 340px;
             margin:80px auto;
             position: relative;
         }
         .outer .img li{
             position: absolute;
             top: 0;
             left: 0;
        }
        .outer .btn {
            position: absolute;
            top:50%;
            width: 25px;
            height: 41px;
            background-color: gray;
            color: white;
            font-weight: 600;
            text-align: center;
            line-height: 41px;
            vertical-align: middle;
            opacity: 0.3;
        }
        .outer .left{
        left: 0;
        }
        .outer .right{
        right: 0;
        }
        .outer .btn:hover{
        opacity: 1;
        }
        .number{
            position: absolute;
            bottom: 18px;
            left: 270px;
            list-style: none;
            height: 24px;
            width: 200px;
        }
        .outer .number li {
            display: inline-block;
            background-color: white;
            width: 8px;
            height: 8px;
            border: 2px solid lightgray;
            border-radius: 25px;
            margin-right:8px;
            text-align: center;
        }
         .outer .number .active {
            background-color:peachpuff;
             border-color: gray;

         }

    </style>
</head>
<body>
<div class="outer">
    <ul class="img">
        <li><a href=""><img src="img/1.jpg" alt=""></a></li>
        <li><a href=""><img src="img/2.jpg" alt=""></a></li>
        <li><a href=""><img src="img/3.jpg" alt=""></a></li>
        <li><a href=""><img src="img/4.jpg" alt=""></a></li>
        <li><a href=""><img src="img/5.jpg" alt=""></a></li>
        <li><a href=""><img src="img/6.jpg" alt=""></a></li>
        <li><a href=""><img src="img/7.jpg" alt=""></a></li>
        <li><a href=""><img src="img/8.jpg" alt=""></a></li>

    </ul>
    <ul class="number">
        <!--<li class="active first"></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    </ul>
    <div class="left  btn" > < </div>
    <div class="right btn" > > </div>
</div>
<script>
    var i=0;
    var img_num=$(".img li").length;
         for(var j=0;j<img_num;j++){
            $(".number").append("<li></li>")
        }
    $(".number li:eq(0)").addClass("active");
    /*手动轮播*/
    $(".number li").mouseover(function () {
        i=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
    });
    /*定时轮播*/
    function go_left() {
        if (i == 0) {
            i = img_num;
        }
        i--;
        $(".number li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    function go_right() {
        if (i == img_num) {
            i = 0;
        }
        i++;
        $(".number li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    c=setInterval(go_right,1000);
    $(".outer").hover(function () {clearInterval(c)

    },function () {c=setInterval(go_right,1000)

    });
    /*点击buttom定播*/
    $(".left").click(go_left);
    $(".right").click(go_right);
</script>
</body>
</html>

 

posted @ 2018-08-01 10:22  enjoyzier  阅读(197)  评论(0)    收藏  举报