css与js实现轮播图效果

梦里梦外; 2021-07-26 20:12 425阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Njk5MTc0_size_16_color_FFFFFF_t_70]  
HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.1.1.js"></script>
        <link rel="stylesheet" href="css/轮播样式.css">
    </head>
    <body>
        <div class="outer">
            <ul class="img">
                <li><a href=""><img src="img/1.jpg"></a> </li>
                <li><a href=""><img src="img/2.jpg"></a> </li>
                <li><a href=""><img src="img/3.jpg"></a> </li>
                <li><a href=""><img src="img/4.jpg"></a> </li>
                <li><a href=""><img src="img/5.jpg"></a> </li>
                <li><a href=""><img src="img/6.jpg"></a> </li>
            </ul>
            <ul class="num">
             
            </ul>
            <div class="left btn"> < </div>
            <div class="right btn"> > </div>
        </div>
    <script>
        //通过jQuery 根据图片的数量创建下面的按钮
        //获取图片数量
        var img_num = $(".img li").length;
        var i=0;
        for (var j=0;j<img_num;j++){ 
            $(".num").append("<li></li>")
        }
        // 为第一个小点加成active $(".num li").eq(0).addClass('active') //手动轮播 $(" .num li").mouseover(function () { 
            var i = $(this).index();
            //siblings 找到该元素的同胞元素
            // 小按钮变红
            $(this).addClass('active').siblings().removeClass("active");
            //显示图片 stop 去掉其他图片的的特效
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut()
        })
        //自动轮播
        //设置定时器 1.5秒
        var c=setInterval(GO_RUN,1500)
        var  i=0; function GO_RUN() { 
            if (i==img_num-1){ 
            i=-1
            }
            i++;
            $(".num li").eq(i).addClass('active').siblings().removeClass("active");
            //显示图片 stop 去掉其他图片的的特效
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut()
        }
    
         function GO_lift() { 
            if (i==0){ 
            i=img_num-1
            }
            i--;
            $(".num li").eq(i).addClass('active').siblings().removeClass("active");
            //显示图片 stop 去掉其他图片的的特效
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut()
        }
    //鼠标停在上面，停止轮播，鼠标拿开，开始轮播 $(".outer").hover(function () { 
            clearInterval(c)
        },function () { 
            c=setInterval(GO_RUN,1500)
        })
        // button 加定播 ,对右边走
        $(".right").click(GO_RUN)
        // button 加定播 ,对左边走
        $(".left").click(GO_lift)
    
    </script>
    </body>
    </html>

引入了一个js文件和一个css文件  
css：

.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: 20px;
        left: 270px;
        list-style: none;
    }
    .num li{ 
        display: inline-block;  /*行内块元素*/
        width: 15px;
        height: 15px;
        background-color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 28px;
        margin-left: 4px;
     }
     .btn{ 
         position: absolute;
         top: 50%;
         background-color: lightgray;
         width: 30px;
         height: 60px;
         color: white;
         text-align: center;
         line-height: 60px;
         font-size: 30px;
         opacity: 0.7;
         margin-top:-30px;
         display: none;
     }
    .right{ 
        right: 0;
    }
    .outer:hover .btn{ 
        display: block;
    }
    /* 为第一个轮播图为红色点*/
    .num .active{ 
        background-color: red;
    }

还有一个jquery-3.1.1.js文件，经常会用到的，太多了所以放个链接

https://download.csdn.net/download/qq\_44699174/12440245  
我设置成零积分下载了，可还是需要消耗积分，也可以去网上搜一下这个文件。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Njk5MTc0_size_16_color_FFFFFF_t_70]: /images/20210726/5c831cfc9f734f87930d75442693ffc8.png