製做JD的手動和自動輪播圖片板塊

時間 2019-11-11

標籤製做手動動輪圖片板塊欄目 Java 简体版

原文原文鏈接

HTML部分css

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>實現東京的輪播圖</title>
    <link rel="stylesheet" href="jd_css.css"/>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jd_js.js"></script>
</head>
<body>
<div class="contents">
    <!-- 設置6張圖片重疊在一塊兒-->
 <ul class="img">
            <li ><a href="#"><img src="images/1.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/3.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/4.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/5.jpg" alt="#"/></a></li>
            <li><a href="#"><img src="images/6.jpg" alt="#"/></a></li>
        </ul>
    <!--設置六個按鈕分別在底下-->
 <ul class="num">
            <!--<li>1</li>-->
            <!--<li>2</li>-->
            <!--<li>3</li>-->
            <!--<li>4</li>-->
            <!--<li>5</li>-->
            <!--<li>6</li>-->
 </ul>

    <div class="left btn"><</div>
    <div class="right btn">></div>
</div>

</body>
</html>

<!--兩個BUG：1。下面的按鈕手動切換和自動切換不一樣步。解決方法：使i和index相匹配。
             2。由於漸入漸出的效果問題，能夠發現屢次手動選擇後，圖片切換會有問題。解決方法：在漸入fadeIn和漸出fadeOut方法前面加入stop方法-->
<!--優化：由於網站在使用這個輪播效果的時候常常會改變圖片的內容甚至圖片的數量，若是改變了圖片的數量的時候，就要改變HTML中NUM的源碼，
        這樣的操做很是的繁雜。解決方法：把HTML中的NUM的LI子元素刪除，利用JQ判斷圖片的數量，而後再用APPEND方法把相應的數量添加到NUM中。
        另外，在刪除圖片後，下方自動輪播的i也要注意修改。-->

/*頁面初始化*/
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}

/*設置最外圍的盒子*/
.contents{
    width: 730px;
    height: 454px;
    margin: 40px auto;
    border: 5px solid black;
    position:relative;
}

/*設置幾張圖片*/
.img li{
    position:absolute;/*設置絕對定位，使圖片脫離文檔流，使六張圖片重疊在一塊兒*/
    top:0;
    right:0;
    display: none;
}

/*設置下面六個按鈕*/
.num {
    position: absolute;/*設置按鈕上級UL的定位爲絕對定位，使它優先級高於圖片，並顯示在圖片的上方*/
    bottom: 10px;
    left: 0;
    font-size: 0;/*在上一級設置字體大小，使每個塊之間的間距消除，但要在下一級設置回字體的大小*/
    width:100%;/*設置寬度，纔可使用文字居中方法*/
    text-align:center;
    cursor:pointer;
}
.num li{
    display:inline-block;
    width: 20px;
    height: 20px;
    background-color: #666666;
    color: #fff;
    text-align: center;
    line-height: 20px;
    border-radius:50% ;
    font-size: 14px;
    margin: 0 2px;
}
.num li.active{
    background-color: #a00;
}
/*設置左右兩個按鈕*/
.btn{
    position: absolute;
    top:50%;
    width:30px;
    height: 60px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    line-height: 60px;
    margin-top: -30px;/*使圖片居中後向上*/
    cursor:pointer;
    display: none;/*是左右兩個按鈕在鼠標移過去的時候纔會出現，先隱藏*/
}
.contents:hover .btn{
    display: block;/*鼠標移入內容區域，左右兩個按鈕出現*/
}
.left{
    left: 0;
}
.right{
    right:0;
}

 /**
 * Created by Administrator on 2016/1/25.
 */
$(document).ready(function(){
    //得到圖片的數量
    var size=$(".img li").size();
    //使用for循環，添加li元素到num中
    for(var x=1;x<=size;x++){
        $(".num").append("<li>"+x+"</li>");//中間加入x變量的方法
    }
    //設置手動輪播圖
    $(".img li").eq(0).show();
    $(".num li").eq(0).addClass("active");
    $(".num li").mouseover(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");//使全部其餘全部的兄弟元素移除類
        var index=$(this).index();//添加索引值
        i=index;//使手動輪播和自動輪播相匹配。
        $(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);//加入stop方法使第二個解決第二個BUG
    });
 //不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。對應mouseout
//只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。對應mouseleave

    //設置自動向右輪播圖
    var i = 0;
    var t =setInterval(zidong,1000);
    function zidong(){
        i++;
        if(i==size){i=0}
        $(".num li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(500).siblings().fadeOut(500);
    }

    //若是鼠標滑動到框中，自動輪播應該中止，若是鼠標移除框外，自動輪播繼續
    $(".contents").hover(function(){
        clearInterval(t);
    },function(){
        t=setInterval(zidong,1500);
    });

    //設置自動向左輪播圖
    function zidongl(){
        i--;
        if(i==-1){i=size-1}
        $(".num li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(500).siblings().fadeOut(500);
    }

    //設置左右兩個按鈕的功能
    $(".left").click(function(){
        zidongl();//另外設置一個自動向左輪播圖的功能
    });
    $(".right").click(function(){
        zidong();//右邊按鈕的功能與上面設置的zidong功能同樣
    })
});

完成後有幾個疑問：1，屢次使用相同的JQ選擇器後，WebStorm會有黃色的warning提示，是否應該用更好的方法。html

二、完成這個漸入漸出鮮果以後，想知道相似豆瓣電影模塊的左右滑動是如何完成的。jquery

最後：記錄在此次學習中學習到的不熟悉的jQuery的方法：app

1.append(content) 向每一個匹配的元素內部追加內容。學習

2.size() jQuery 對象中元素的個數。返回值:Number字體

3.addClass(class) 爲每一個匹配的元素添加指定的類名。優化

4.index([subject]) 搜索匹配的元素，並返回相應元素的索引值，從0開始計數。返回值:Number網站

5.eq(index) 獲取第N個元素this

6.siblings([expr]) 取得一個包含匹配的元素集合中每個元素的全部惟一同輩元素的元素集合。能夠用可選的表達式進行篩選。指針