2018-09-13-Python全栈开发-轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.1.1.js"></script>
    <title>Title</title>
    <style>
        .outer{
            width: 590px;
            height: 470px;
            margin: 80px auto;
            position: relative;

        }
        .img1 li{
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;

        }
        .turn1{
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: gray;
            top: 50%;
            text-align: center;
            opacity: 0.7;
            line-height: 50px;
        }
        .right{

            right: 0;
        }
        .left{
            left: 0;
        }
        .num{
            position: absolute;
            bottom: 10px;
            left: 225px ;
            list-style: none;
        }
        .num li{

            display: inline-block;
               width: 18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 4px;
        }
        .num .active {
            background-color: red;
        }

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

    <div class="right turn1"> > </div>
    <div class="left turn1"> < </div>

</div>

<script>
    var i=0;
//  通过jquery自动创建按钮标签

    var img_num=$(".img1 li").length;

    for(var j=0;j<img_num;j++){
        $(".num").append("<li></li>")
    }

    $(".num li").eq(0).addClass("active");
    //手动轮播
    $(".num li").mouseover(function () {
        index1=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        $(".img1 li").eq(index1).stop().fadeIn(500).siblings().stop().fadeOut(500)
    });
    //自动轮播
    c=setInterval(GO_R,1500);
    function GO_R() {
        if(i==img_num-1){
            i=-1
        }
        i++;
        $('.num li').eq(i).addClass("active").siblings().removeClass("active");
        $(".img1 li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500)
    };
    function GO_L(){
        if(i==0){
            i=img_num
        }
        i--;
        $('.num li').eq(i).addClass("active").siblings().removeClass("active");
        $(".img1 li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500)
    }
    //往右点击
    $('.right').click(GO_R);
    $('.left').click(GO_L);
    //悬浮
    $('.outer').hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GO_R,1500);
    });







</script>

</body>
</html>
2018-09-13-Python全栈开发-轮播

猜你喜欢
