html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方
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>
下面是javacript部分
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 //定义一个span标签的集合cirBtn 8 var cirBtn = $("circleBtn").getElementsByTagName("span"); 9 //定义一个全局变量 10 var index = 0; 11 //定义一个setInterval方法cirTimer 12 var cirTimer = null; 13 14 for (var i = 0; i < cirBtn.length; i++) { 15 //给图片加上id=0,1,2 16 cirBtn[i].id = i; 17 //鼠标移动邦定触发事件:显示当前id对应的图片 18 cirBtn[i].onmouseenter = function() { 19 //先停止自动循环 20 clearInterval(cirTimer); 21 //隐藏图片和小框 22 clearBtn(); 23 //显示当前id对应的图片和小框 24 showBtn(this.id); 25 } 26 //鼠标离开触发事件:自动循环 27 cirBtn[i].onmouseout = function() { 28 cirTimer = setInterval(autoPlay, 2000); 29 } 30 } 31 //设置当前只有一个定时器cirTimer 32 if (cirTimer) { 33 clearInterval(cirTimer); 34 cirTimer = null; 35 } 36 37 cirTimer = setInterval(autoPlay, 2000); 38 39 //自动循环函数 40 function autoPlay() { 41 //当index小于2则++,否则就是超过长度,则归0即index=0 42 if (index < cirBtn.length - 1) { 43 index++; 44 } else { 45 index = 0; 46 } 47 //console.log(index); 48 //清除函数 49 clearBtn(); 50 //显示函数 51 showBtn(index); 52 } 53 54 //定义一个隐藏图片和小框的函数 55 function clearBtn() { 56 for (var i = 0; i < cirBtn.length; i++) { 57 58 cirBtn[i].className = ""; 59 pto[i].style.display = "none"; 60 } 61 } 62 //定义一个显示当前id对应的图片和小框的函数 63 function showBtn(x) { 64 for (var i = 0; i < cirBtn.length; i++) { 65 console.log(x); 66 if (i == x) { 67 cirBtn[i].className = "light"; 68 pto[i].style.display = "block"; 69 } 70 //这里重要了.这里把x赋值给index是为了让循环从停止的id重新开始循环 71 index = x; 72 } 73 } 74 75 }