輪播圖練習

時間 2019-11-13

標籤練習简体版

原文原文鏈接

HTML代碼css

<!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代碼html

@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

/經過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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。