這里把css和html合在一塊寫了，這塊代碼只是布局和樣式不是重點
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 77 .circleBtn { 78 position: absolute; 79 top: 170px; 80 right: 182px; 81 width: 42px; 82 height: 10px; 83 zoom: 1; 84 } 85 86 .circleBtn span { 87 width: 10px; 88 height: 10px; 89 margin: 0 2px; 90 float: left; 91 cursor: pointer; 92 background: url("img/cir.png"); 93 } 94 95 .circleBtn .light { 96 background: url("img/oncir.gif"); 97 } 98 </style> 99 <script type="text/javascript" src="jiaodiantujs.js"> 100 </script> 101 102 </head> 103 104 <body> 105 <div class="photo" id="main"> 106 <div class="main"> 107 <ul class="main1" id="amain"> 108 <li class="pto pto1">one</li> 109 <li class="pto pto2">two</li> 110 <li class="pto pto3">three</li> 111 </ul> 112 </div> 113 114 <span class="btn btn1" id="btn1"></span> 115 <span class="btn btn2" id="btn2"></span> 116 <!-- 117 <div class="circleBtn" id="circleBtn"> 118 <span class="light"></span> 119 <span></span> 120 <span></span> 121 </div> 122 --> 123 </div> 124 </body> 125 126 </html>
下面是Javascript代碼，主要是通過左右兩個按鈕來控制圖片左右切換
1 function $(id) { 2 return typeof id === "string" ? document.getElementById(id) : id; 3 } 4 window.onload = function() { 5 //pto變量為所展示的圖片集和 6 var pto = $("amain").getElementsByTagName("li"); 7 //btnleft和right為兩個按鈕 8 var btnleft = $("btn1"); 9 var btnright = $("btn2"); 10 //div變量為設置停止圖片顯示所需 11 var div = $("main"); 12 //idBtn為當前圖片的id 13 var idBtn = 0; 14 //setInterval函數所需的函數名timer 15 var timer = null; 16 17 //自定義一個函數用於按鈕變換 18 function changeBtn(one, two) { 19 one.style.background = two; 20 } 21 //鼠標移動至左按鈕時，套用自定義函數 22 btnleft.onmouseenter = function() { 23 //this表示當前btnleft的背景 24 changeBtn(this, "url(img/onleft.gif) no-repeat"); 25 } 26 //鼠標離開至左按鈕時，套用自定義函數 27 btnleft.onmouseout = function() { 28 //this同理 29 changeBtn(this, "url(img/left.png) no-repeat"); 30 } 31 //鼠標移動至右按鈕時，套用自定義函數 32 btnright.onmouseenter = function() { 33 changeBtn(this, "url(img/onright.gif) no-repeat"); 34 } 35 //同理 36 btnright.onmouseout = function() { 37 changeBtn(this, "url(img/right.png) no-repeat"); 38 } 39 40 //clearPto函數表示隱藏圖片 41 function clearPto() { 42 for (var i = 0; i < pto.length; i++) { 43 pto[i].style.display = "none"; 44 45 } 46 } 47 //showPto函數表示顯示當前圖片 48 function showPto(y) { 49 //局部變量y，為當前鼠標點擊的id 50 for (var i = 0; i < pto.length; i++) { 51 //console.log(y); 52 //當點擊的id和圖片id，也就是y相等時候，顯示圖片 53 if (i == y) { 54 pto[i].style.display = "block"; 55 } 56 57 } 58 } 59 60 //鼠標左擊綁定函數 61 btnleft.onclick = function() { 62 //當idBtn為0 ，左擊則，下一張為2，所以把長度2 賦值給idBtn 63 if (idBtn == 0) { 64 idBtn = pto.length - 1; 65 } else { 66 //同理，當不為0時，所顯示的為小於當前所以要-- 67 idBtn--; 68 } 69 //套用函數 70 clearPto(); 71 //if語句結束，把idBtn代入函數中 72 showPto(idBtn); 73 } 74 75 btnright.onclick = function() { 76 //當idBtn小於長度，則左右為下一張，所以idBtn++ 77 if (idBtn < pto.length - 1) { 78 idBtn++; 79 } else { 80 //超出長度，則下一張為0，所以把0賦值 81 idBtn = 0; 82 } 83 clearPto(); 84 showPto(idBtn); 85 } 86 //判斷語句，設置當前只有一個timer函數執行 87 if (timer) { 88 clearInterval(timer); 89 timer = null; 90 } 91 //鼠標離開div，則執行函數 92 div.onmouseout = start; 93 //鼠標移到div，則停止自動輪播 94 div.onmouseover = stop; 95 start(); 96 97 //setInterval函數詳情可以自行百度，不多解釋 98 function start() { 99 timer = setInterval(function() { 100 btnright.onclick(); 101 }, 2000); 102 } 103 104 function stop() { 105 clearInterval(timer); 106 } 107 }