轮播图的实现

第一步javaee fristpage.jsp

<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

• 
• 
• 
• 
• 

第二步js样式autoplay.js

//获取ID
var $ = function (id) {return typeof id === “string” ? document.getElementById(id) : id;};
//获取tagName
var KaTeX parse error: Can't use function '$' in math mode at position 244: … this.oBox = $̲(id); this.oU…(“ul”, this.oBox)[0];
this.aImg = $$("img",this.oBox);this.timer=null;this.autoTimer=null;this.iNow=0;this.creatBtn();this.aBtn=$$(“li”, this.oCount);
this.toggle();
this.autoTimer = setInterval(function ()
{
oThis.next();
}, 3000);
this.oBox.onmouseover = function ()
{
clearInterval(oThis.autoTimer);
};
this.oBox.onmouseout = function ()
{
oThis.autoTimer = setInterval(function ()
{
oThis.next();
}, 3000);
};
for (var i = 0; i < this.aBtn.length; i++)
{
this.aBtn[i].index = i;
this.aBtn[i].onmouseover = function ()
{
oThis.iNow = this.index;
oThis.toggle();
};
}
},
creatBtn: function ()
{
this.oCount = document.createElement(“ul”);
this.oFrag = document.createDocumentFragment();
this.oCount.className = “count”;
for (var i = 0; i < this.aImg.length; i++)
{
var oLi = document.createElement(“li”);
oLi.innerHTML = i + 1;
this.oFrag.appendChild(oLi);
}
this.oCount.appendChild(this.oFrag);
this.oBox.appendChild(this.oCount);
},
toggle: function ()
{
for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = “”;
this.aBtn[this.iNow].className = “current”;
this.doMove(-(this.iNow * this.aImg[0].offsetHeight));
},
next: function ()
{
this.iNow++;
this.iNow == this.aBtn.length && (this.iNow = 0);
this.toggle();
},
doMove: function (iTarget)
{
var oThis = this;
clearInterval(oThis.timer);
oThis.timer = setInterval(function ()
{
var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + “px”);
}, 30);
}
};
window.onload = function ()
{
new AutoPlay(“box_autoplay”);
};

第三步css样式autoplay.css

body, div, ul, li {
margin:0;
padding:0;
}
ul {
list-style-type:none;
}

#box_autoplay {
position:relative;
width:900px;
height:335px;
background:#fff;
border-radius:5px;
border:8px solid #fff;
margin:10px auto;
cursor:pointer;
}
#box_autoplay .list {
position:relative;
width:900px;
height:335px;
overflow:hidden;
}
#box_autoplay .list ul {
position:absolute;
top:0;
left:0;
}
#box_autoplay .list li {
width:900px;
height:335px;
overflow:hidden;
}
#box_autoplay .count {
position:absolute;
right:0;
bottom:5px;
}
#box_autoplay .count li {
color:#fff;
float:left;
width:20px;
height:20px;
cursor:pointer;
margin-right:5px;
overflow:hidden;
background:#F90;
opacity:0.7;
filter:alpha(opacity=70);
border-radius:20px;
}
#box_autoplay .count li.current {
color:#fff;
opacity:1;
filter:alpha(opacity=100);
font-weight:700;
background:#f60;
}
#tmp {
width:100px;
height:100px;
background:red;
position:absolute;
}