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 - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,552评论 25赞 708
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,991评论 19赞 139
  • 写给三岁的丹妞
    时间真快呢，丹妞都三岁了！不知不觉地，丹妞已经长成了一个能说会道，有自己独立思考能力的小姑娘了。这些变化，我一面惊...
    刘忙不盲阅读 320评论 0赞 0
  • 熊猫GO|黄桃蛋挞，味蕾的极致享受！
    以前对于烘培新手来说，蛋挞是一个难以企及的高度，因为千层酥皮的制做工序相当复杂，也就是我们常说的“叠被子”，是件非...
    熊猫GO阅读 323评论 0赞 0
  • 关于“死亡”
    我在很小的时候，就死过一次了，至今我还清楚地记得，那是一个穿短袖衫的季节，到底是春天还是夏天，那时不晓得，只知道我...
    欢欣鼓舞邓沂沂阅读 452评论 2赞 4