轮播图练习

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="web_page_css.css" type="text/css">
</head>
<body>
<div class="outer">
    <ul class="image">
        <li class="img1"><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>
    </ul>
    <ul class="num">
        <!--<li class="active"></li>-->
        <!--<li class="active"></li>-->
        <!--<li class="active"></li>-->
        <!--<li class="active"></li>-->
        <!--<li class="active"></li>-->
    </ul>
    <div class="left btn"> < </div>
    <div class="right btn"> > </div>
</div>
<script src="jquery-3.4.1.js"></script>
<script src="web_page_js.js"></script>
</body>
</html>

css代码

@charset "utf-8";
.outer{
    width: 790px;
    height: 340px;
    margin: 80px auto;
    position: relative;
}
.image li{
    position: absolute;
    list-style: none;
    top: 0;
    left: 0;
}
.image .img1{
    z-index: 3;    /*多层叠放时，设置该层在什么位置*/
}
.num{
    position: absolute;
    bottom: 10px;
    left: 270px;
    list-style: none;     /*列表序号样式*/
    z-index: 4;
}
.num li{
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;      /*行高*/
    text-align: center;     /*设置文本横向对齐方式*/
    background-color: white;
    border-radius: 50%;      /*设置圆角边框*/
    margin-left: 4px;
}
.btn{
    position: absolute;
    top: 50%;           /*距离上边界*/
    width: 30px;
    height: 60px;
    background-color: lightblue;
    color: white;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    opacity: 0.5;     /*透明度*/
    margin-top: -30px;
    display: none;
    z-index: 5;
}
.left{
    left: 0
}
.right{
    right: 0
}
.outer:hover .btn{
    display: inline-block;
}
.num .active{
    background-color: red;
}

JavaScript代码

/通过jQuery自动创建按钮
var t = 0;    /*设定轮播图的索引初始值*/
var image_num = $(".image li").length;
for(var i=0;i<image_num;i++){
    $(".num").append("<li>");
}
$(".num li").eq(0).addClass("active");

//手动轮播
$(".num li").mouseover(function(){     /*绑定事件，鼠标移动到某个元素之上*/
    t = $(this).index();        /*手动的索引设置为全局变量，手动索引改变引发全局索引值改变*/
    $(this).addClass("active");
    $(this).siblings().removeClass("active");
    $(".image li").eq(t).stop().fadeIn(500).siblings().stop().fadeOut(500)/*设置淡入淡出效果*/
});

//自动轮播
var c = setInterval(GO_R,1500);     /*周期性调用函数，直至clearInterval（）*/
function GO_R(){
    if(t==image_num-1){
        t=-1;
    }
    t++;
    $(".num li").eq(t).addClass("active");
    $(".num li").eq(t).siblings().removeClass("active");
    $(".image li").eq(t).stop().fadeIn().siblings().stop().fadeOut();
}
function GO_L(){
    if(t==0){
        t=image_num;
    }
    t--;
    $(".num li").eq(t).addClass("active");
    $(".num li").eq(t).siblings().removeClass("active");
    $(".image li").eq(t).stop().fadeIn().siblings().stop().fadeOut();
}
$(".outer").hover(function(){
    clearInterval(c);
},function(){
    c = setInterval(GO_R,1500);
});

//button按钮播放
$(".right").click(GO_R);
$(".left").click(GO_L);

 

posted @ 2019-07-18 01:00  saber゛  Views(160)  Comments(0)  Edit  收藏  举报