常用事件【由浅入深】1

---恢复内容开始---

一。点击变色并提示索引

html

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <link href="StyleSheet.css" rel="stylesheet" />
 7     <style type="text/css"></style>
 8 </head>
 9 <body>
10     <div class="d1"></div>
11     <div class="d1"></div>
12     <div class="d1"></div>
13     <div class="d1"></div>
14     <div class="d1"></div>
15     <div class="d1"></div>
16 </body>
17 </html>
18 <script type="text/javascript">
19     //找到操作对象
20     var a = document.getElementsByClassName("d1");
21     //for循环遍历数组
22     for (var x = 0; x < a.length; x++) {
23         //找到对应索引
24         a[x].index = x;
25         //点击事件
26         a[x].onclick = function () {
27             //变色
28             this.style.backgroundColor = "blue";
29             //弹出索引
30             alert(this.index);
31         }
32     }
33 
34 </script>

1 .d1 {
2     float: left;
3     width: 100px;
4     height: 30px;
5     margin-left: 10px;
6     background-color:red;
7 }

css

二。选项卡

选项卡HTML

选项卡

 1 .d1 {
 2     float: left;
 3     width: 100px;
 4     height: 30px;
 5     margin-left: 10px;
 6     position: relative;
 7     background-color: red;
 8 }
 9 
10 .d2 {
11     width: 100px;
12     height: 500px;
13     background-color: pink;
14     position: absolute;
15     top: 100px;
16     display:none;
17 }

css

三。移入变色，移出变色，点击变色（移出不变色）

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <link href="StyleSheet.css" rel="stylesheet" />
 7 </head>
 8 <body>
 9 
10     <div class="d1">
11     </div>
12     <div class="d1">
13     </div>
14     <div class="d1">
15     </div>
16     <div class="d1">
17     </div>
18     <div class="d1">
19     </div>
20 </body>
21 </html>
22 <script type="text/javascript">
23     //操作对象
24     var a = document.getElementsByClassName("d1");
25     for (var y = 0; y < a.length; y++) {
26         //记录索引
27         a[y].index = y;
28         //移入事件
29         a[y].onmouseover = function () {
30             //判断颜色
31             if (a[this.index].style.backgroundColor != "black")
32                 a[this.index].style.backgroundColor = "blue";
33         }
34         //移出事件
35         a[y].onmouseout = function () {
36             //判断是否为点击之后的颜色
37             if (a[this.index].style.backgroundColor == "blue")
38                 //如果不是点击之后的颜色，恢复原色
39             {
40                 a[this.index].style.backgroundColor = "red";
41             }
42         }
43         //点击事件
44         a[y].onclick = function () {
45             //只能有一个点击颜色，先把所有颜色都恢复本色
46             for (var v = 0; v < a.length; v++)
47             { a[v].style.backgroundColor = "red" }
48             //再把点击的颜色变色
49             a[this.index].style.backgroundColor = "black";
50         }
51     }
52 </script>

升级版变色.html

1 .d1 {
2     float: left;
3     width: 100px;
4     height: 30px;
5     margin-left: 10px;
6     position: relative;
7     background-color: red;
8 }

升级版变色

四。升级版多重变色

 1 <!DOCTYPE html>
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6 
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9 
10     <link href="StyleSheet.css" rel="stylesheet" />
11 
12 </head>
13 
14 <body>
15 
16 
17     <div class="d1" style="background-color: red;">
18     </div>
19 
20     <div class="d1" style="background-color: yellow;">
21     </div>
22 
23     <div class="d1" style="background-color: blue;">
24     </div>
25 
26     <div class="d1" style="background-color: green;">
27     </div>
28 
29     <div class="d1" style="background-color: purple;">
30     </div>
31 
32 </body>
33 
34 </html>
35 
36 <script type="text/javascript">
37     //操作对象
38     var a = document.getElementsByClassName("d1");
39     //var b = new Array();
40     //b = document.getElementsByClassName("d1").style.backgroundColor;
41     var b = new Array();
42     b[0] = "red";
43     b[1] = "yellow";
44     b[2] = "blue";
45     b[3] = "green";
46     b[4] = "purple";
47 
48 
49     for (var y = 0; y < a.length; y++) {
50         //记录索引
51         a[y].index = y;
52         b[y].index = y;
53 
54         //移入事件
55         a[y].onmouseover = function () {
56             //判断颜色
57             if (a[this.index].style.backgroundColor != "black")
58             { a[this.index].style.backgroundColor = "gray"; }
59         }
60         //移出事件
61         a[y].onmouseout = function () {
62             //判断是否为点击之后的颜色
63             if (a[this.index].style.backgroundColor == "gray")
64                 //如果不是点击之后的颜色，恢复原色
65             {
66                 a[this.index].style.backgroundColor = b[this.index];
67             }
68         }
69         //点击事件
70         a[y].onclick = function () {
71             //只能有一个点击颜色，先把所有颜色都恢复本色
72             for (var v = 0; v < a.length; v++)
73             { a[v].style.backgroundColor = b[v] }
74             //再把点击的颜色变色 
75             a[this.index].style.backgroundColor = "black";
76         }
77     }
78 </script>

升级版多重变色

1 .d1 {
2     float: left;
3     width: 100px;
4     height: 30px;
5     margin-left: 10px;
6    
7     
8 }

升级版多重变色

五。初级大图轮播

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/css5.css" rel="stylesheet" />
</head>
<body>

    <div class="imgAll">
 <!--       //图片-->
        <img class="img" src="001.jpg" style="display: block;" />
        <img class="img" src="002.jpg" />
        <img class="img" src="003.jpg" />
        <img class="img" src="004.jpg" />
        <img class="img" src="005.jpg" />
     <!--    //按钮-->
        <div class="btn_LR" id="btn_left"><</div>
        <div class="btn_LR" id="btn_right" style="right: 0px;">></div>
    </div>


</body>
</html>
<script type="text/javascript">
    var count = 0;
    var o = document.getElementsByClassName("img_item");
    //左按钮触发
    document.getElementById("btn_left").onclick = function () {
        move(0);
    }
    //右按钮触发
    document.getElementById("btn_right").onclick = function () {
        move(1);
    }

    function move(a) {
        for (var i = 0; i < o.length; i++) {
            o[i].style.display = "none";
        }

        if (a == 0) {
            count--;
            if (count < 0) {
                count = o.length - 1;
            }
        }
        else {
            count++;
            if (count > (o.length - 1)) {
                count = 0;
            }
        }

        o[count].style.display = "block";
    }



</script>

大图轮播初级

.imgAll {
    position: relative;
    width: 400px;
    height: 226px;
}

.img {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.btn_LR {
    width: 30px;
    height: 60px;
    position: absolute;
    z-index: 1000;
    top: 50%;
    margin-top: -30px;
    text-align: center;
    line-height: 60px;
    font-size: 33px;
    font-weight: bold;
    cursor: pointer;
}

轮播

---恢复内容结束---

posted on 2017-03-30 22:33 张鑫4477 阅读(159) 评论(0) 编辑收藏举报