轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

Henry_Lv

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量195

点赞数

分类专栏： web编程基础 jQuery JavaScript

本文链接：https://blog.youkuaiyun.com/Henry_Lv/article/details/80328776

版权

web编程基础同时被 3 个专栏收录

11 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        .outer{
            width:790px;
            height: 340px;
            margin: 30px auto;
            position: relative;
        }
        .img li{
            position: absolute;
            top:0;
            left:0;
            list-style: none;
        }
        .dot{
            position: absolute;
            left: 270px;
            bottom: 0px;
            list-style: none;
            /*background: #b4b4b4;*/
            /*opacity: 0.5;*/
        }
        .dot li{
            display: inline-block;
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 100%;
            text-align: center;
            margin: 0 5px;
        }
        .but{
            position: absolute;
            top: 50%;
            margin-top: -30px;
            width: 30px;
            height: 60px;
            background: #b4b4b4;
            color: white;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            opacity:0.5;
            display: none;
        }
        .left{
            left:0;
            border-top-right-radius: 10%;
            border-bottom-right-radius: 10%;
        }
        .right{
            right: 0;
            border-top-left-radius: 10%;
            border-bottom-left-radius: 10%;
        }
        .outer:hover .but{
            display: inline-block;
        }
        .dot .active{
            background: 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>
        <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="dot">
        <!--<li class="active"></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    </ul>

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

</div>
<script>

    //通过jQuery自动创建按钮标签
    var img_num=$('.img li').length;
    for(var k=0;k<img_num;k++)
    {
        $('.dot').append('<li></li>')
    }
    $('.dot li').eq(0).addClass('active')



    //手动轮播
      var i=0;
    $('.dot li').mouseover(function () {
        i=$(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('.img li').eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
    })


    //自动轮播
    var clock=setInterval(Go_R,1500);
    function Go_R()
    {
        if(i==img_num-1)
        {
            i=-1;
        }
        i++;
        $('.dot 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--;
        $('.dot li').eq(i).addClass('active').siblings().removeClass('active');
        $('.img li').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }

    $('.outer').hover(     //hover(function1,function2):function1在hover时触发，function2在不再hover后触发
        function ()
    {
        clearInterval(clock);
    },
        function ()
        {
        clock=setInterval(Go_R,1500);
    });

    $('.right').click(Go_R);

    $('.left').click(Go_L);
</script>
</body>
</html>