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就不细说了