4、自定義屬性、輪播圖、下拉菜單

1、自定義屬性

任何的html標簽都有自己的一個屬性，當時那都是它本身的固定屬性，而我們在項目中可能會遇到需要給標簽添加一些自定義的屬性，去判斷替換內容或者賦值等等，那么就需要給標簽設定一個屬性來作為判斷標準或者賦值的標準
JS可以為任何HTML元素、添加任意個自定義屬性

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="button" value="按鈕1">
    <input type="button" value="按鈕2">
    <input type="button" value="按鈕3">
    <script type="text/javascript">
        var aBtn = document.getElementsByTagName('input');
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].abc = 123       //  這句話，相當于給 3個input添加 自定義屬性 abc = 123
                                    //    <input abc="123" type="button" value="按鈕1">
                                    //    <input abc="123" type="button" value="按鈕2">
                                    //    <input abc="123" type="button" value="按鈕3">
        }                           //    但在審查元素中，并不可見
    </script>
</body></html>
1.1、自定義一組開關(onOff)
2121517217752_.pic.jpg
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style media="screen">
        li {
            float: left;
            width: 100px;    height: 100px;    margin: 10px;
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script type="text/javascript">
        var aLi = document.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].onOff = true;           //  給每一個"li"添加 自定義屬性  onOff = true
            aLi[i].onclick = function () {
                if (this.onOff) {          //  判斷當前（this）開關為真時執行以下...
                    this.style.cssText = 'background-color:blue;    //   像這種點擊一次發生倆件事情、就要用if語句
                }else {                   //   否則  為假時執行以下...
                    this.style.backgroundColor = 'red';
                }
                this.onOff = !this.onOff;      //  當再次點擊時、真的 就會變為 假的
            }
        }
    </script>
</body></html>
1.2、獲取自身遞增數字（num）及匹配數組（arr）內容

匹配數組時就要用到num
點擊事件、點擊一次、倆次、三次...而執行不同的圖片/文字[這里取決于數組內容]

aBtn[i].num = 0; 
this.num ++;

類似于輪播圖的按鈕功能，點擊按鈕換圖片這里是替換字母

2141517361528_.pic.jpg
<html lang="en">
<head>
    <meta charset="UTF-8">
</head><body>
    <input type="button" value="0">
    <input type="button" value="0">
    <input type="button" value="0">
    <script type="text/javascript">
        var aBtn = document.getElementsByTagName('input');
        var arr = ['A','B','C','D'];      //  可以替換成文字、圖片地址

        for (var i = 0; i < aInput.length; i++) {   //  當你想要同時操作多個元素，就用for循環（這里是3個按鈕）
            aBtn[i].num = 0;            //  給每一個"li"添加 自定義屬性  onOff = true
            aBtn[i].onclick = function () {
                this.value = arr[this.num];
                this.num ++;
                if (this.num == arr.length) {
                    this.num = 0;
                }
            }
        }
    </script>
</body></html>
1.3、添加索引值（index）、匹配數組

index是我們自己定義的屬性名稱（也可改成其他單詞） 這里的 " i" 是for循環里" i" 的 0.1.2

 aBtn[i].index = i;
2131517361207_.pic.jpg
 <html lang="en">
<head>
    <meta charset="UTF-8">
</head><body>
    <input type="button" value="btn1">
    <input type="button" value="btn2">
    <input type="button" value="btn3">
    <p>大哥：</p>
    <p>二弟：</p>
    <p>三弟：</p>
    <script type="text/javascript">
        var aBtn = document.getElementsByTagName('input');
        var aP = document.getElementsByTagName('p');
        var arr = ['劉備','關羽','張飛']
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;        //  index是我們自己定義的屬性名稱（也可改成其他單詞） 這里的 "i" 是for循環里" i" 的 0.1.2
                                      //  給第 1個"input"添加 自定義屬性  index = 0
                                      //  給第 2個"input"添加 自定義屬性  index = 1
                                      //  給第 3個"input"添加 自定義屬性  index = 0
            aBtn[i].onclick = function () {    //  每一次 按鈕 の點擊事件
                this.value = arr[this.index];     //  this  代表 當前點擊的"這個"按鈕
                aP[this.index].innerHTML += arr[this.index];
            }
        }
    </script>
</body></html>

案例1、輪播圖（含按鈕 和 小圓點）無定時器

屏幕快照 2018-01-31 下午1.34.33.png
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style media="screen">
        * {
            margin: 0; padding: 0;
            list-style: none;
            background-color: #ccc;
        }
        #pic {
            width: 1200px;
            height: 450.23px;
            margin: 100px auto;
            background: url(img/loader_ico.gif) no-repeat center #fff;;
            position: relative;
        }
        #pic img{
            width: 1200px;
            height: 450.23px;
        }
        #pic span,#pic p {
            position: absolute;
            left: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: #333;
            text-align: center;
            color: #fff;

        }
        #pic span { top: 0px; }
        #pic p { bottom: 0px; }
        #pic ul{
            position: absolute;
            top: 0;
            right: -60px;
        }
        #pic li{
            width: 40px;
            height: 40px;
            background-color: #666;
            margin-bottom: 5px;
        }
        #pic li.active{ background-color: #fc3; }
    </style>
</head>
<body>
    <div id="pic">
        <img src="" width="1200" alt="">
        <span>數量正在加載中...</span>
        <p>文字說明正在加載中...</p>
        <ul></ul>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('pic');
            var oImg = oDiv.getElementsByTagName('img')[0];
            var oSpan = oDiv.getElementsByTagName('span')[0];
            var oP = oDiv.getElementsByTagName('p')[0];
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
            var arrText = ['小米MIX','紅米5A','小米圈鐵耳機Pro','小米路由器3'];
            var num = 0;

            //HTML部分并沒有寫 "li" .而是在JS中寫的
            for (var i = 0; i < arrUrl.length; i++) {
                oUl.innerHTML += '<li></li>';
            }
            //初始化
            oImg.src = arrUrl[num];            //  'images/1.jpg'
            oSpan.innerHTML = (num+1) + '/' + arrUrl.length;     //   '1/4'
            oP.innerHTML = arrText[num];      //  '小米MIX'
            aLi[num].className = 'active';    //  默認第一個小方塊變黃色
            //小方塊的點擊事件 => 圖片更換
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].index = i;
                aLi[i].onclick = function () {
                    oImg.src = arrUrl[this.index];
                    oSpan.innerHTML = (this.index+1)+'/'+ arrUrl.length;
                    oP.innerHTML = arrText[this.index];
                    for (var i = 0; i < aLi.length; i++) {
                        aLi[i].className = '';       //  清空樣式
                    }
                    this.className = 'active'        //  當前點擊的小方塊變黃色
                }
            }
        }
    </script>
</body></html>

案例2、輪播圖（含左右按鈕 的順序播放和循環播放）

屏幕快照 2018-01-31 下午1.19.04.png
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style media="screen">
        * { margin: 0; padding: 0;}
        .wrap {
            width: 520px;
            overflow: hidden;
            margin: 100px auto;
        }
        .wrap_imgs {
            width: 518px;
            height: 348px;
            border: 1px solid #333;
            /* background: url(img/1.jpg) */
            position: relative;
        }
        .wrap_top,
        .wrap_bottom {
            width: 206px;
            margin: 5px 150px;
        }
        input {
            width: 100px;
            line-height: 30px;
            border-radius: 8px;
            background-color: #555;
            color: #fff;
        }
        .wrap_imgs p {
            width: 518px;
            height: 30px;
            position: absolute;
            left: 0;
            line-height: 30px;
            background-color: rgba(0,0,0,.5);
            text-align: center;
            z-index: 1;
            color: #fff;
        }
        .wrap_imgs p.text { top: 0; }
        .wrap_imgs p.number { bottom: 0; }
        .wrap_imgs #imgs {
            position: absolute;
            top: 0;
            left: 0;
            width: 518px;
            height: 348px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="wrap_top">
            <input id="order" type="button" value="順序播放">
            <input id="loop" type="button" value="循環播放">
        </div>
        <div class="wrap_imgs">
            <p id="text" class="text">小船</p>
            <p id="number" class="number">1/4</p>
            <img id="imgs" src="img/1.jpg" >
        </div>
        <div class="wrap_bottom">
            <input id="prev" type="button" value="上一張">
            <input id="next" type="button" value="下一張">
        </div>
    </div>
    <script type="text/javascript">
        var oPrev = document.getElementById('prev');         // 上一張
        var oNext = document.getElementById('next');         // 下一張
        var oImgs = document.getElementById('imgs');         //  圖片
        var oText = document.getElementById('text');         //  文本內容
        var oNumber = document.getElementById('number');     //   1/4
        var oOrder = document.getElementById('order');      //  順序播放 按鈕
        var oLoop = document.getElementById('loop');        //  循環播放 按鈕
        var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
        var arrText = ['小船','竹林','荷花','山川'];
        var num = 0;
        var onOff = true;   //默認true記錄為順序播放模式 ，false為循環播放

        oOrder.onclick = function () {    //  true 順序播放
            onOff = true;
        }
        oLoop.onclick = function () {     //  false 循環播放
            onOff = false;
        }
        function fnTab() {         //   公共函數  帶入上下按鍵
            oImgs.src = arrUrl[num];
            oText.innerHTML = arrText[num];
            oNumber.innerHTML = (num+1)+'/'+arrText.length;
        }
        oNext.onclick = function () {   //  下一張
            num ++;
            if (num == arrText.length) {
                if (onOff) {            //  true 順序播放
                    num = arrText.length-1;
                    // alert('最后一張了')
                }else {                 //  false 循環播放
                    num = 0;
                }
            }
            fnTab()
        }
        oPrev.onclick = function () {   //  上一張
            num --;
            if (num < 0) {
                if (onOff) {        //  true 順序播放
                    num = 0;
                    // alert('第一張了')
                }else {            //  false 循環播放
                    num = arrText.length-1;
                }
            }
            fnTab()
        }
    </script>
</body></html>

案例3、下拉菜單

屏幕快照 2018-01-31 下午10.09.32.png
<html>
<head>
    <meta charset="UTF-8">
    <style>
        ul,li{ list-style: none; padding: 0; margin: 0;}
        ul{ display: none;}
        h3{ margin: 0; background: cornflowerblue;}
        div{ text-indent: 20px; width: 200px;}
        .active{ background: coral;}
    </style>
</head>
<body>
    <div>
        <h3>分組1</h3>
        <ul>
            <li>分組11</li>
            <li>分組12</li>
        </ul>
    </div>  
    <div>
        <h3>分組2</h3>
        <ul>
            <li>分組21</li>
            <li>分組22</li>
        </ul>
    </div>  
    <div>
        <h3>分組3</h3>
        <ul>
            <li>分組31</li>
            <li>分組32</li>
            <li>分組33</li>
            <li>分組34</li>
            <li>分組35</li>
        </ul>
    </div>  
    <script>
        var h3s = document.getElementsByTagName("h3");
        var uls = document.getElementsByTagName("ul");
        var lis = document.getElementsByTagName("li");
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function(){
                for(i = 0; i < lis.length; i++) {
                    lis[i].style.background = "";
                }
                this.style.background = "yellow";
            }
            lis[i].onmouseout = function(){
                for(i = 0; i < lis.length; i++) {
                    lis[i].style.background = "";
                }
            }
        }
        for(var i = 0;i<h3s.length;i++){
            h3s[i].onoff = true;
            h3s[i].index = i;
            h3s[i].onclick = function(){
                for (var i = 0; i < h3s.length; i++) {
                    if(i != this.index){       //   除了點擊的h3以外的所有h3
                        h3s[i].className = "";
                        h3s[i].onoff = true;
                        uls[i].style.display = "none";
                    }
                }
                if(this.onoff){
                    this.className = "active";
                    uls[this.index].style.display = "block"; 
                }else{
                    this.className = "";
                    uls[this.index].style.display = "none";
                }
                this.onoff = !this.onoff;
            }
        }
    </script>
</body></html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,462評論 25贊 708
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具（例如配置管理，服務發現，斷路器，智...
    卡卡羅2017閱讀 134,973評論 19贊 139
  • 時間真快呢，丹妞都三歲了！不知不覺地，丹妞已經長成了一個能說會道，有自己獨立思考能力的小姑娘了。這些變化，我一面驚...
    劉忙不盲閱讀 314評論 0贊 0
  • 以前對于烘培新手來說，蛋撻是一個難以企及的高度，因為千層酥皮的制做工序相當復雜，也就是我們常說的“疊被子”，是件非...
    熊貓GO閱讀 318評論 0贊 0
  • 我在很小的時候，就死過一次了，至今我還清楚地記得，那是一個穿短袖衫的季節，到底是春天還是夏天，那時不曉得，只知道我...
    歡欣鼓舞鄧沂沂閱讀 452評論 2贊 4