标签：play ddl center head width 按钮 for asc 努力
1.鼠标移入，左右按钮显示
2.右下叫小圆点鼠标移入，进入下一张图
3.左右按钮点击，右下小圆点页跟随变更
4.自动开启计时器，鼠标移入右下叫小圆点区，计时器停止，鼠标移出小圆点区，计时器继续（自动下一张图片）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>总有人比你富有，却比你更聪明更努力！</title> 6 <style type="text/css"> 7 /* css 重置 */ 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 } 13 14 body { 15 background: #fff; 16 font: normal 12px/22px 宋体; 17 } 18 19 img { 20 border: 0; 21 } 22 23 a { 24 text-decoration: none; 25 color: #333; 26 } 27 28 /* 本例子css */ 29 .slideBox { 30 width: 790px; 31 height: 340px; 32 overflow: hidden; 33 position: relative; 34 border: 1px solid #ddd; 35 margin: 50px auto; 36 } 37 38 .bd .hd { 39 height: 20px; 40 overflow: hidden; 41 position: absolute; 42 right: 5px; 43 bottom: 5px; 44 z-index: 1; 45 } 46 47 .bd .hd ul { 48 overflow: hidden; 49 zoom: 1; 50 float: left!important; 51 } 52 53 .bd .hd ul li { 54 float: left; 55 margin-right: 5px!important; 56 width: 20px; 57 height: 20px; 58 line-height: 20px; 59 font-weight: bold; 60 text-align: center; 61 background: #fff; 62 cursor: pointer; 63 border-radius: 50%; 64 } 65 66 .bd .hd ul li.on { 67 background: #f00; 68 color: #fff; 69 } 70 71 .slideBox .bd { 72 position: relative; 73 height: 100%; 74 z-index: 0; 75 } 76 77 /* ----------------------- */ 78 .slideBox .bd li { 79 zoom: 1; 80 vertical-align: middle; 81 left: 0; 82 top: 0; 83 } 84 85 .slideBox .bd li.first { 86 z-index: 1; 87 } 88 89 /* ----------------------- */ 90 .slideBox .bd img { 91 width: 790px; 92 height: 340px; 93 display: block; 94 } 95 96 .slideBox .prev, 97 .slideBox .next { 98 position: absolute; 99 left: 0; 100 top: 50%; 101 margin-top: -25px; 102 display: none; 103 width: 32px; 104 height: 40px; 105 background: rgba(0,0,0,0.3); 106 filter: alpha(opacity=50); 107 opacity: 0.5; 108 text-align: center; 109 font-size: 30px; 110 font-weight: bold; 111 color: #fff; 112 line-height: 40px; 113 } 114 115 .slideBox .next { 116 left: auto; 117 right: 0; 118 background-position: 8px 5px; 119 } 120 121 .slideBox .prev:hover, 122 .slideBox .next:hover { 123 filter: alpha(opacity=100); 124 opacity: 1; 125 } 126 127 128 </style> 129 </head> 130 <body> 131 <div id="slideBox" class="slideBox"> 132 133 <div class="bd" id="bd"> 134 <div class="hd"> 135 <ul id="control"> 136 <li class="on"></li> 137 <li></li> 138 <li></li> 139 <li></li> 140 <li></li> 141 </ul> 142 </div> 143 144 <ul> 145 <li><a href="#"><img id="bigImg" src="images/01.jpg"/></a></li> 146 </ul> 147 <a class="prev" id="prev" href="javascript:;" ><</a> 148 <a class="next" id="next" href="javascript:;">></a> 149 </div> 150 151 </div> 152 </body> 153 </html> 154 <script> 155 156 // 公共获取事件源函数 157 function $(id) { 158 return document.getElementById(id); 159 } 160 // 切换轮播图 161 function changImg(imgIndex) { 162 $(‘bigImg‘).src= imgArr[imgIndex]; 163 console.log(imgIndex); 164 // 排他思想 165 for(var j = 0 ; j < liBtns.length ; j++) { 166 liBtns[j].className = ""; 167 } 168 // 设置小红点样式 169 liBtns[imgIndex].className = ‘on‘; 170 } 171 // 功能需求类似tab栏，也可参考线上轮播图效果 172 // 获取轮播图区 173 // 获取轮播图 174 var imgArr = [ 175 "images/01.jpg", 176 "images/02.jpg", 177 "images/03.jpg", 178 "images/04.jpg", 179 "images/05.jpg" 180 ]; 181 // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮 182 $(‘bd‘).onmouseover = function () { 183 $(‘prev‘).style.display = "block"; 184 $(‘next‘).style.display = "block"; 185 } 186 $(‘bd‘).onmouseout = function () { 187 $(‘prev‘).style.display = "none"; 188 $(‘next‘).style.display = "none"; 189 } 190 // 记录当前图片下标 191 var imgIndex = 0; 192 // 圆点鼠标移到上面图片轮播 193 var liBtns = $(‘control‘).getElementsByTagName(‘li‘); 194 for (var i = imgIndex ; i < liBtns.length ; i++) { 195 // 设置当前按钮下标 196 liBtns[i].index = i; 197 liBtns[i].onmouseover = function () { 198 // 排他思想 199 for(var j = 0 ; j < liBtns.length ; j++) { 200 liBtns[j].className = ""; 201 } 202 this.className = ‘on‘; 203 $(‘bigImg‘).src=imgArr[this.index]; 204 // 记录当前图片下标 205 imgIndex = this.index; 206 } 207 } 208 209 /*上下轮播图*/ 210 // 下一张轮播图 211 $(‘next‘).onclick = function () { 212 // 下一张图片的地址是当前图片地在数组中的下标加1,并且在图片下标等于数组长度的时，重调图片数组下标为0，完成循环轮播 213 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++; 214 // 设置下一张图片 215 changImg(imgIndex); 216 217 218 } 219 // 上一张轮播图 220 $(‘prev‘).onclick = function () { 221 // 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播 222 imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --; 223 // 设置上一张轮图片 224 changImg(imgIndex); 225 } 226 227 228 229 /* 计时器,3秒切换到下一张轮播图*/ 230 var t; // 计时器变量 231 function interval() { 232 t = setInterval( 233 function () { 234 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++; 235 // 设置下一张图片 236 changImg(imgIndex); 237 } 238 ,3000); 239 } 240 241 // 鼠标移入圆点区，关闭计时器 242 $(‘control‘).onmouseover = function () { 243 clearInterval(t); 244 } 245 // 鼠标移开圆点区，开启计时器自动切换轮播图 246 $(‘control‘).onmouseout = function () { 247 interval(); 248 } 249 250 interval(); 251 252 </script>
标签：play ddl center head width 按钮 for asc 努力
原文地址：http://www.cnblogs.com/mrszhou/p/7667448.html
