任務卡_04-前端技術_簡潔高效的jQuery【用jQuery實作輪播圖效果】

一，重做輪播圖訓練任務

1，任務概述

2，參考代碼

2.1 重點摘要

2.2 參考代碼

一，重做輪播圖訓練任務

1，任務概述

JS 中輪播圖任務卡一緻，此次需要大家應用 jQuery 來完成。

具體效果參考網址：https://www.jd.com/

2，參考代碼

2.1 重點摘要

1）選擇imgList中的li标簽

var imgs = $("#imgList li");

2）周遊li标簽，并一次性設定多個css樣式

$("#iconList li").each(function(){
    if($(this).index() == index){
        $(this).css({"border":"2px solid gray","borderColor":"rgba(128,128,128,0.5)","top":"0px"});
    }else{
        $(this).css({"border":"none","top":"2px"});
    }
});

3）為标簽綁定滑鼠移入移出事件

$("#imgList").mouseout(function(){
    doStart();
}).mouseover(function(){
    clearInterval(timer);
    index = (index - 1 + imgs.length) % imgs.length;
});

4）獲得滑鼠點選的li标簽下标

$("#iconList li").mouseover(function(){
    index = $(this).index();
    doStart();
});

2.2 參考代碼

為了顯示jQuery在PC端的優勢、對比上次任務的不同之處，代碼中保留了上次任務的部分邏輯；

為便于閱讀，注釋代碼已盡可能規範，喜歡并支援的朋友點個贊再欣賞呗（づ￣3￣）づ╭❤～

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖設計——jQuery實作</title>
    <script src="./jquery-3.5.0.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;       /* 消除清單的原點 */
            text-decoration: none;  /* 消除連結下劃線 */
        }
        /* 整體展示架構的樣式 */
        #container{
            width: 386px;
            height: 260px;
            left: 500px;
            top: 200px;
            overflow: hidden;       /* 超出部分選擇隐藏 */
            border: 0.5px solid gray;/* 邊框設定為黑色 */
            position: relative;     /* 架構采用相對定位 */
        }
        /* 圖檔清單的樣式 */
        #imgList{
            width: 1930px;          /* 所有圖檔累計的寬度386 * 5 */
            height: 260px;
        }
        /* 單個圖示的樣式 */
        #imgList li{
            float: left;            /* 浮動靠左排列 */
            transition: opacity 300ms ease-in-out 0.5s;
            transition-duration: 0.5s;/* 過渡動畫 但是好像沒有起作用 應該是沒有定義過渡後的效果*/
        }
        /* 下方小圓點圖示清單樣式 */
        #iconList{
            position: absolute;     /* 絕對定位 */
            width: 75px;            /* 設定整體規格、位置 */
            height: 10px;
            left: 20px;
            bottom: 10px;
        }
        /* 小圖示的定位 */
        #iconList li{
            position: relative;
            float: left;
            margin-left: 5px;       /* 擴大圓點間距 */
            width: 10px;
            height: 10px;
            cursor: pointer;        /* 将滑鼠圖形變成小手樣式 */
            border-radius: 50%;     /* 設定為圓形 */
            background-color:white;
            opacity: 0.75;          /* 透明度 */
            top: 2px;               /* 普通小圓點距頂端距離 為了使選中小圓點添加邊框後仍然保持對齊 */
        }
        /* 字型圖示實作左右移動圖檔的功能 */
        @font-face {
            font-family: 'fontello';
            src: url('./font/fontello.eot?33765623');
            src: url('./font/fontello.eot?33765623#iefix') format('embedded-opentype'),
                url('./font/fontello.woff?33765623') format('woff'),
                url('./font/fontello.ttf?33765623') format('truetype'),
                url('./font/fontello.svg?33765623#fontello') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        /* 設定字型圖示的整體樣式 */
        .icon{
            font-family: 'fontello';
            color: white;
        }
        /* 左邊字型圖示的樣式 */
        #iconLeft{
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 30px;
            left: 0px;
            bottom: 125px;
            background-color:gray;
            opacity: 0.5;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            line-height: 30px;      /* 保證字型圖示上下居中 */
            text-align: left;       /* 靠左 */
        }
        /* 右邊字型圖示的樣式 */
        #iconRight{
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 30px;
            right: 0px;
            bottom: 125px;
            background-color:gray;
            opacity: 0.5;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            line-height: 30px;
            text-align: right;      /* 靠右 */
        }
    </style>
</head>
<body>
    <div id="container" >
        <!-- 由于展示圖檔後index立刻加一 為了顯示上一張圖檔 這裡需要減二 -->
        <!-- <div class="icon" id="iconLeft" onclick="moveImg(-2)"></div> -->
        <div class="icon" id="iconLeft"></div>
        <!-- 由于展示圖檔後index立刻加一 為了顯示下一張圖檔 這裡不需要更改 -->
        <div class="icon" id="iconRight"></div>
        
        <!-- <ul id="imgList" onmouseover="doStop()" onmouseout="doStart()"> -->
        <ul id="imgList">
            <li><a href=""><img src="./images/17.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/18.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/19.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/20.jpg" alt=""></a></li>
        </ul>
 
        <ul id="iconList">
            <!-- <li onmouseover="locate(0)"></li>
            <li onmouseover="locate(1)"></li>
            <li onmouseover="locate(2)"></li>
            <li onmouseover="locate(3)"></li> -->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
    </div>
    <script>
        // 習慣性的添加入口函數
        $(function(){
            // 初始化圖檔位置
            var index = 0;
            // 擷取圖檔标簽
            // var imgs = document.getElementById("imgList").getElementsByTagName("li");
            var imgs = $("#imgList li");
            // 擷取圖示清單
            // var icons = document.getElementById("iconList").getElementsByTagName("li");
            var icons = $("#iconList li");
            // 設定定時器
            var timer;
            // 開始輪播
            doStart();
            
            // 展示圖檔和小圖示(通用方法)
            function show(){
                index = (index + imgs.length) % imgs.length;// 保證不越界
                changeImg();
                changeIcon();
                index++;                    // 下标自增
            }
            
            // 啟動定時輪播(通用方法)
            function doStart(){
                show();                     // 先執行一次
                if(timer != null){
                    clearInterval(timer);
                    timer = null;
                }
                timer = setInterval(show,3000);
            }
            
            // 根據index 修改目前位置的圓點樣式
            function changeIcon(){
                $("#iconList li").each(function(){
                    if($(this).index() == index){
                        $(this).css({"border":"2px solid gray","borderColor":"rgba(128, 128, 128, 0.5)","top":"0px"});
                    }else{
                        $(this).css({"border":"none","top":"2px"});
                    }
                });
                // for(var i = 0; i < imgs.length; i++){
                //     if(i == x){
                //         // icons[i].style.border="2px solid gray"
                //         // icons[i].style.borderColor="rgba(128, 128, 128, 0.5)";
                //         // icons[i].style.top="0px";// 保證居中
                //     }else{
                //         icons[i].style.border="none";
                //         icons[i].style.top="2px";// 保證居中
                //     }
                // }
            }

            // 根據index 通過修改marginLeft展示不同圖檔
            function changeImg(){
                if(index == 0){
                    // document.getElementById("imgList").style.marginLeft = "0px";
                    $("#imgList").css("marginLeft","0px");
                }else{
                    // document.getElementById("imgList").style.marginLeft = -index * 386+"px";
                    $("#imgList").css("marginLeft",-index * 386+"px");
                }
            }
            
            // 設計圖檔清單的滑鼠移入移出事件
            $("#imgList").mouseout(function(){
                doStart();
            }).mouseover(function(){
                clearInterval(timer);
                // 由于展示完目前圖檔後index立即加一,若滑鼠懸停在圖檔上之後移開，會立刻顯示第二張圖檔，是以減一
                // 為了避免index出現負數，進行取模運算
                index = (index - 1 + imgs.length) % imgs.length;
            });
            // 暫停定時輪播(直接在script中綁定滑鼠事件，是以這裡将原先在HTML中的doStop取消了)
            // function doStop(){
            //     clearInterval(timer);
            //     index = (index - 1 + imgs.length) % imgs.length;
            // }
            
            
            // 根據選擇的圓點來确定圖檔(這裡點選事件的索引index感覺點選的哪個li标簽，取代了傳參的方法)
            $("#iconList li").mouseover(function(){
                index = $(this).index();
                doStart();
            });
            // function locate(x){
            //     index = (x + imgs.length) % imgs.length;
            //     doStart();
            // }

            // 綁定左右圖示點選事件
            $("#iconLeft").click(function(){
                // 由于展示完目前圖檔後index立即加一,若要顯示上一張圖檔，需要減二
                index = index - 2;
                doStart();
            });
            $("#iconRight").click(function(){
                doStart();
            });
            
        });
        
    </script>
</body>
</html>

任務卡_04-前端技術_簡潔高效的jQuery【用jQuery實作輪播圖效果】

一，重做輪播圖訓練任務

1，任務概述

2，參考代碼

2.1 重點摘要

2.2 參考代碼

繼續閱讀

java8list集合使用lambad表達式

浏覽器相關文章

用jquery實作輪播圖的效果

04-前端技術_javaScript基礎

04-前端技術_簡潔高效的jQuery

extract-text-webpack-plugin報錯

不是吧！這遊戲比王者還上頭……

實用的輪播圖插件slick.js

一個利用jquery寫的左右輪播圖

一種覆寫掉window.alert()函數的實作

Ajax跨域和JSONP

web前端基礎知識的歸檔整理（一）——正規表達式、HTML、CSS正規表達式CSS

使用jquery ui和validate實作的彈出式登入

05-資料庫_資料庫基礎

Echarts滑鼠懸浮樣式

推薦一些有用的網站一鍵分享制作網站小圖示插件網站seo 相關的網站地圖 api二維碼相關