Jquery--实现轮播图

初学者仿着别人的写的一个轮播图

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="jquery-1.12.4.min.js"></script>
    <style type="text/css">
    img{
        height:100%;
        width:100%;
    }
    
    .outer{
        width: 560px;
        height: 380px;
        margin:80px auto;
        position: relative;
    }
    
    .img li{
        position: absolute;
        /*相对于父级定位，如果父级没有定位往上查找，直到body标签*/
        list-style:none;
        top: 0px;
        left: 0;
    }

    .number{
        position: absolute;
        bottom: 20px;
        left: 0;
        //background-color: yellow;
        list-style:none;
        left:160px;
    }

    .number li{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: white;

        border-radius: 50%;
        text-align: center;
        line-height: 12px;
        margin-left: 6px;
    }

    .btn{
        position: absolute;
        top:50%;
        //left: 0;
        width: 30px;
        height: 60px;
        background-color: gray;
        color: white;

        text-align: center;
        line-height: 60px;
        font-size: 30px;
        opacity: 0.5;
        margin-top: -30px;
        display: none;
    }
    .left{
        left: 0px;
    }

    .right{
        right: 0px;
    }

    .outer:hover .btn{
        display: block;
    }
    
    .number .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="number">
        <!-- <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 src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    var i=0
    //通过jquery自动创建按钮标签
     var ima_num=$(".img li").length

     for (var k = 0; k <ima_num; k++) {
          $(".number").append("<li></li>")
     }

     $(".number li").eq(0).addClass("active")
    

     //手动轮播
     $(".number li").mouseover(function(){
          i=$(this).index();
         $(this).addClass("active");
         $(this).siblings().removeClass("active");

         $(".img li").eq(i).stop().fadeIn(100).siblings().stop().fadeOut(100);
     })



     //自动轮播
     var c=setInterval(go_R,1500);
     

     function go_R(){
         if (i==ima_num-1) {
             i=-1;
         }
         i++;
         $(".number 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=ima_num;
         }
         i--;
         $(".number li").eq(i).addClass("active").siblings().removeClass("active");

         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
     }

     //jquery--hover方法两个参数
     //参数一：当鼠标悬浮在区域里时执行的函数
     //参数二：当鼠标离开当前区域时执行的函数
     $(".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>

 

posted @ 2019-12-09 14:27  coldplaycode  阅读(334)  评论(0)  编辑  收藏  举报

coldplaycode