轮播代码如下：

<!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>
效果展示：
Python之路【第二十二篇】:轮播图片CSS
秒客网

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

轮播代码如下：

相关文章
