javascript点击焦点图 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <style type="text/css">
 8         * {
 9             margin: 0;
10             padding: 0;
11             font-size: 12px;
12         }
13         
14         .photo {
15             width: 400px;
16             height: 200px;
17             margin: 50px;
18             position: relative;
19         }
20         
21         .main {
22             width: 400px;
23             height: 200px;
24             position: relative;
25         }
26         
27         .main1 li {
28             width: 400px;
29             height: 200px;
30             list-style-type: none;
31         }
32         
33         .pto {
34             position: absolute;
35             left: 0;
36             top: 0;
37         }
38         
39         .pto1 {
40             width: 400px;
41             height: 200px;
42             background: red;
43         }
44         
45         .pto2 {
46             width: 400px;
47             height: 200px;
48             background: pink;
49             display: none;
50         }
51         
52         .pto3 {
53             width: 400px;
54             height: 200px;
55             background: blue;
56             display: none;
57         }
58         
59         .btn {
60             width: 30px;
61             height: 30px;
62             position: absolute;
63         }
64         
65         .btn1 {
66             left: 0;
67             top: 85px;
68             background: url("img/left.png");
69         }
70         
71         .btn2 {
72             right: 0;
73             top: 85px;
74             background: url("img/right.png");
75         }
76     </style>
77     <script type="text/javascript" src="jiaodiantujs.js">
78     </script>
79 
80 </head>
81 
82 <body>
83     <div class="photo" id="main">
84         <div class="main">
85             <ul class="main1" id="amain">
86                 <li class="pto pto1">one</li>
87                 <li class="pto pto2">two</li>
88                 <li class="pto pto3">three</li>
89             </ul>
90         </div>
91 
92         <span class="btn btn1" id="btn1"></span>
93         <span class="btn btn2" id="btn2"></span>
94 
95     </div>
96 </body>
97 
98 </html>
 1 function $(id) {
 2     return typeof id == "string" ? document.getElementById(id) : id;
 3 }
 4 window.onload = function() {
 5     //老规矩,这里是定义变量
 6     var pto = $("amain").getElementsByTagName("li");
 7     var btnleft = document.getElementById("btn1");
 8     var btnright = document.getElementById("btn2");
 9     var idpto = 0;
10     //定义一个点击按钮背景图变色的函数,方便调用
11     function onpto(one, two) {
12         one.style.background = two;
13     }
14     //左边按钮没有鼠标移动到的时候
15     btnleft.onmouseenter = function() {
16         onpto(this, "url(img/onleft.gif) no-repeat");
17     }
18     //左边按钮鼠标移动到的时候
19     btnleft.onmouseout = function() {
20         onpto(this, "url(img/left.png) no-repeat");
21     }
22     //右边按钮没有鼠标移动到的时候
23     btnright.onmouseenter = function() {
24         onpto(this, "url(img/onright.gif) no-repeat");
25     }
26     //右边按钮鼠标移动到的时候
27     btnright.onmouseout = function() {
28         onpto(this, "url(img/right.png) no-repeat");
29     }
30     //定义一个用于图片消失的函数
31     function hidepto() {
32         for (var i = 0; i < pto.length; i++) {
33             pto[i].style.display = "none";
34 
35         }
36     }
37     //定义一个用于图片显示的函数
38     function showpto(id) {
39         for (var i = 0; i < pto.length; i++) {
40             //定义一个变量id,当id=i的时候则显示图片
41             if (i == id) {
42                 pto[i].style.display = "block";
43             }
44 
45         }
46     }
47     //鼠标点击左边的时候,切图
48     btnleft.onclick = function() {
49         hidepto();
50         //当idpto=0的时候,下次点击则是2,而pto.length-1则是2,所以
51         //所以,用赋值语句给idpto重新赋值
52         //为什么要pto.length-1,因为.length的长度是从1开始
53         if (idpto == 0) {
54             idpto = pto.length - 1;
55         } else {
56             idpto--;
57         }
58         showpto(idpto);
59     }
60     //鼠标点击右边时,切图
61     btnright.onclick = function() {
62         hidepto();
63         //同理,图片显示顺序是0123
64         if (idpto < pto.length - 1) {
65             idpto++;
66         } else {
67             idpto = 0;
68         }
69         showpto(idpto);
70     }
71 }

 因为是注重javascript的过程，所以html和css就不细说了

posted @ 2016-10-17 22:16  rookieM  阅读(304)  评论(0)  编辑  收藏  举报