用JS实现的简单轮播图
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>slideshow</title> | |
| <style type="text/css"> | |
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| .frame{ | |
| position: relative; | |
| width: 672px; | |
| height: 370px; | |
| /*border:1px solid red;*/ | |
| margin: 0 auto; | |
| } | |
| .frame ul{ | |
| list-style: none; | |
| } | |
| .frame ul li{ | |
| display: none; | |
| } | |
| .leftbtn{ | |
| width: 55px; | |
| height: 55px; | |
| position: absolute; | |
| left: 0; | |
| top: 150px; | |
| margin-top: -27px; | |
| background:url(images/slide-btnL.png) no-repeat; | |
| cursor: pointer; | |
| } | |
| .rightbtn{ | |
| width: 55px; | |
| height: 55px; | |
| position: absolute; | |
| right: 0; | |
| top: 150px; | |
| margin-top: -27px; | |
| background:url(images/slide-btnR.png) no-repeat; | |
| cursor: pointer; | |
| } | |
| .circle{ | |
| position: absolute; | |
| width: 100px; | |
| height: 10px; | |
| bottom: 22px; | |
| left: 50%; | |
| margin-left: -50px; | |
| } | |
| .circle ol{ | |
| list-style: none; | |
| } | |
| .circle ol li{ | |
| float: left; | |
| width: 7px; | |
| height: 7px; | |
| background: url(images/ico.png) no-repeat -137px -132px; | |
| margin-right: 13px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .frame ul li.checked{ | |
| display: block; | |
| } | |
| .circle ol li.opt{ | |
| background:url(images/ico.png) no-repeat -124px -132px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="frame" > | |
| <ul id="Frame"> | |
| <li class="checked"><img src="images/aaa.jpg"></li> | |
| <li><img src="images/bbb.jpg"></li> | |
| <li><img src="images/ccc.jpg"></li> | |
| <li><img src="images/ddd.jpg"></li> | |
| <li><img src="images/eee.jpg"></li> | |
| </ul> | |
| <div class="leftbtn" id="lbtn"></div> | |
| <div class="rightbtn" id="rbtn"></div> | |
| <div class="circle" id="dot"> | |
| <ol> | |
| <li class="opt"></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ol> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var oframe = document.getElementById("Frame").getElementsByTagName("li"); | |
| var olbtn = document.getElementById("lbtn"); | |
| var orbtn = document.getElementById("rbtn"); | |
| var odot = document.getElementById("dot").getElementsByTagName("li"); | |
| var semaphore = 0; | |
| orbtn.onclick = function(){ | |
| semaphore++; | |
| if (semaphore > 4) { | |
| semaphore = 0; | |
| } | |
| slideshow(); | |
| } | |
| olbtn.onclick = function(){ | |
| semaphore--; | |
| if (semaphore < 0) { | |
| semaphore = 4; | |
| } | |
| slideshow(); | |
| } | |
| // IEFF!!!!!!!!!!!!!!!!!!!!!! | |
| for (var i = 0; i < odot.length; i++) { | |
| (function(i){ | |
| odot[i].onmouseover = function(){ | |
| semaphore = i; | |
| slideshow(); | |
| } | |
| }(i))}; | |
| function slideshow(){ | |
| for (var i = 0; i < oframe.length; i++) { | |
| oframe[i].className = ""; | |
| } | |
| oframe[semaphore].className = "checked"; | |
| for (var i = 0; i < odot.length; i++) { | |
| odot[i].className = ""; | |
| } | |
| odot[semaphore].className = "opt"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
因为上传不了整个文件包，所以只有代码，里面的图面可以换成自己的路径。我已经测试了效果。希望大神们给我改进的意见。
