最近终于写成了自己创作的图片轮播插件，使用原生js编写。与目前网上流行的轮播插件相比，功能和效果稍弱，但是使用起来相当方便。
先看html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片轮播</title> <link rel="stylesheet" type="text/css" href="pmmpig.css"> </head> <body> <div style=" 600px; height: 300px; margin: 0 auto;"> <div class="pigwrap"> <ul> <li><img src="imgs/1.jpg"><a href="#">凤凰岭</a></li> <li><img src="imgs/2.jpg"><a href="#">凤凰岭梨花</a></li> <li><img src="imgs/3.jpg"><a href="#">外滩</a></li> <li><img src="imgs/4.jpg"><a href="#">威海日出</a></li> <li><img src="imgs/5.jpg"><a href="#">北京站</a></li> <li><img src="imgs/6.jpg"><a href="#">泰山</a></li> </ul> </div> </div> <script type="text/javascript" src="pmmpig.js"></script> </body> </html>
下面是CSS样式修饰部分
.pigwrap{ width: 550px; height: 300px; position: relative; margin: 0; padding: 0; overflow: hidden; } .pigwrap ul{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .pigwrap li{ float: left; list-style: none; height: 100%; } .pigwrap li img{ width: 100%; height: 100%; cursor: pointer; } .pigwrap li a { display: block; width: 100%; height: 40px; margin-top: -40px; font-weight: bold; padding-left: 10px; color: #fff; font-size: 16px; line-height: 40px; font-family: "微软雅黑" } .pigwrap li a:link, .pigwrap li a:visited{ text-decoration: none; } .pigwrap li a:hover, .pigwrap li a:active{ text-decoration: underline; } .foot{ width: 100%; height: 20px; position: absolute; bottom: 40px; text-align: center; } .circle{ background-color: #f5f5f5; width: 15px; height: 15px; margin: 0 auto; display: inline-block; border-radius: 7px; margin-right: 10px; cursor: pointer; display: none; opacity: 0.3; } .gobtn{ display: none; position: absolute; top: 100px; left: 0px; width: 100%; height: 60px; overflow: hidden; } .gobtn .btnleft{ float: left; margin-left: 10px; background-image: url("../imgs/btn.gif"); cursor: pointer; } .gobtn .btnright{ float: right; margin-right: 10px; margin-top: -60px; background-image: url("../imgs/btn.gif"); cursor: pointer; }
下面是js部分
var pigNum = 0; var current = 1; var speed = 10; var timer = null; var contro = null; var stop = 3000; var owrap = null; var oul = null; var pigWidth = 0; (function () { // body... init(); nextPig(); contro = setInterval(function(){ nextPig(); }, stop); })(); function init() { owrap = document.getElementsByClassName("pigwrap")[0]; oul = owrap.getElementsByTagName("ul")[0]; pigNum = oul.getElementsByTagName("li").length; pigWidth = owrap.clientWidth; initView(); owrap.onmouseover = function (e) { // body... mouseoverHandler(); } owrap.onmouseout = function () { // body... mouseoutHandler(); } } function initView () { // body... var lis = oul.getElementsByTagName("li"); for (var i = 0; i < lis.length; ++i){ var li = lis[i]; li.style.width = pigWidth + "px"; } oul.style.width = pigWidth*pigNum + "px"; var footdiv = document.createElement("div"); footdiv.setAttribute("class", "foot"); var cirs = ""; for(var i = 0; i < pigNum; ++i){ cirs += "<div class='circle' onclick='topig("+(i+1)+")'></div>"; } footdiv.innerHTML = cirs; owrap.appendChild(footdiv); var btndiv = document.createElement("div"); btndiv.setAttribute("class", "gobtn"); btndiv.innerHTML = "<div><img src='imgs/btn.gif' class='btnleft' onclick='toLastPig()'></div>"+ "<div><img src='imgs/btn.gif' class='btnright' onclick='toNextPig()'></div>"; owrap.appendChild(btndiv); } function mouseoutHandler () { // body... var cirs = owrap.getElementsByClassName("circle"); for(var i = 0; i < cirs.length; ++i){ cirs[i].style.display = "none"; } cirs[current-1].style.opacity = 0.3; var btns = document.getElementsByClassName("gobtn"); btns[0].style.display = "none"; clearInterval(contro); contro = setInterval(function(){ nextPig(); }, stop); } function mouseoverHandler () { // body... var cirs = owrap.getElementsByClassName("circle"); for(var i = 0; i < cirs.length; ++i){ cirs[i].style.display = "inline-block"; } cirs[current-1].style.opacity = 0.9; var btns = document.getElementsByClassName("gobtn"); btns[0].style.display = "block"; clearInterval(contro); } function toLastPig () { // body... if (current == 1) topig(pigNum); else topig(current-1); } function toNextPig () { // body... if (current == pigNum) topig(1); else topig(current+1); } function topig (index) { // body... clearInterval(contro); //纠正位置 oul.style.left = -pigWidth*(current-1) + "px"; var cirs = owrap.getElementsByClassName("circle"); cirs[current-1].style.opacity = 0.3; startMove(oul, pigWidth*(index-current), speed); current = index; contro = setInterval(function(){ nextPig(); }, stop); cirs[current-1].style.opacity = 0.9; } function nextPig (argument) { // body... var ow = owrap; var ul = oul; //纠正位置 ul.style.left = -pigWidth*(current-1) + "px"; current++; if (current > pigNum) { current = 1; startMove(ul, -pigWidth*(pigNum-1), speed); return ; } startMove(ul, pigWidth, speed); } function startMove (elemet, length, x) { // body... clearInterval(timer); var speed = 0; timer = setInterval(function(){ if(Math.abs(length) <= Math.abs(speed)){ clearInterval(timer); elemet.style.left = elemet.offsetLeft - length + "px"; }else{ speed = length / x; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); length -= speed; elemet.style.left = elemet.offsetLeft - speed + "px"; } }, 30); }