最近终于写成了自己创作的图片轮播插件，使用原生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="width: 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:;
padding:;
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);
}