注册登录

Python之路【第二十二篇】:轮播图片CSS

轮播代码如下：

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

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


        }

        .num{
            position: absolute;
            bottom: 0px;
            left: 280px;
            /*background-color: #dce7f4;*/
            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: 14px;
        }

        .btn{
            position: absolute;
            top: 50%;
            width: 30px;
            height: 60px;
            background-color: lightgrey;
            color: white;

            text-align: center;
            line-height: 60px;
            font-size: 30px;
            opacity: 0.8;
            margin-top: -30px;
            display: none;

        }

        .left{
            left: 0;
        }

        .right{
            right: 0;
        }

        .outer:hover .btn{
            display: block;
        }

        .num .active{
            background-color: red;

        }
    </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>
        </ul>

        <ul class="num ">
            <!--<li class="active"></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
        </ul>
        <div class="left btn"> < </div>
        <div class="right btn"> > </div>
    </div>
<script>
    // 通过jquery自动创建按钮标签
    var img_num=$(".img li").length;

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

    }
    $(".num li").eq(0).addClass("active");

    //手动轮播

    // $(".num li").mouseover(function () {
    //     var index=$(this).index();
    //this不应该加引号
    //     $("this").addClass("active").siblings().removeClass("active")
    //
    // })

    $(".num li").mouseover(function () {

        // var index=$(this).index();
        i=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        //以下两种方法都可实现
        // $(".img li").eq(index).show(1).siblings().hide()
        $(".img li").eq(index).stop().fadeIn(200).siblings().stop().fadeOut(200)
    });


    //自动轮播
    var c=setInterval(GO_R,1500);
    var i=0;

    function GO_R() {
        if(i==img_num-1){
            i=-1
        }
        i++;
        $(".num li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }

    function GO_L() {
        if(i==0){
            i=img_num
        }
        i--;
        $(".num li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
    }

    $(".outer").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GO_R,1500)

    })

    //button加定播
    // $(".right").bind("click",GO_R)
    $(".right").click(GO_R);
    $(".left").click(GO_L);
</script>

</body>
</html>
知识兔

效果展示：

计算机