css与js实现轮播图效果-蒲公英云

css与js实现轮播图效果

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

在这里插入图片描述
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">
         <!--
            <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;
    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;
}