<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播</title>
<style type="text/css">
* { margin: 0; padding: 0; font-family: 微软雅黑; }
ul,ol,li { list-style-type: none; }
a,img { text-decoration: none; border: noen; }
#banner { width: 400px; height: 280px; border: 1px solid black; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
#banner .hd { width: 100%; height: 50px; background-color: black; line-height: 50px; overflow: hidden; }
#banner .hd ul li { display: inline-block; width: 25%; height: 50px; color: white; text-align: center; float: left; cursor: pointer; }
#banner .hd ul li.on { background-color: red; }
#banner .bd { width: 100%; height: 230px; line-height: 230px; overflow: hidden; }
#banner .bd ul { display: block; height: 100%; width: 100%; overflow: hidden; transition: all cubic-bezier(0.65, -0.21, 0.45, 0.94) .3s; }
#banner .bd ul li { display: block; width: 100%; background-color: #EEE; text-align: center; font-size: 24px; font-weight: bold; }
</style>
</head>
<body>
<div id="banner">
<div class="hd"><ul></ul></div>
<div class="bd">
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</div>
</div>
<a href="javascript:void(0)" onClick="alert(p)">查看初始变量</a>
<script type="text/javascript">
// 获取轮播图标签
var banner = document.getElementById("banner");
var baSon = banner.childNodes;
// 获取滚动焦点div
var bahd;
for(var i = 0; i < baSon.length; i++){
if(baSon[i].className == "hd"){
bahd = baSon[i];
};
};
// 获取滚动焦点ul
var bahdul = bahd.childNodes;
var hdul;
for(var i = 0; i < bahdul.length; i++){
if(bahdul[i].nodeName == "UL"){
hdul = bahdul[i];
};
};
// 获取内容滚动div
var babd;
for(var i = 0; i < baSon.length; i++){
if(baSon[i].className == "bd"){
babd = baSon[i];
};
};
// 获取内容滚动ul
var babdul = babd.childNodes;
var dbul;
for(var i = 0; i < babdul.length; i++){
if(babdul[i].nodeName == "UL"){
dbul = babdul[i];
};
};
// 获取内容滚动li并清除空格以及其他节点
var dbulli = dbul.childNodes;
for(var i = 0; i < dbulli.length; i++){
if(dbulli[i].nodeType != 1){
dbul.removeChild(dbulli[i]);
};
};
// 计算ul与li宽度
var dbulwid = 0;
for(var i = 0; i < dbulli.length; i++){
dbulwid += dbulli[i].offsetWidth;
dbulli[i].setAttribute("off",i);
};
dbul.style.width = dbulwid + "px";
var dbliwid = (dbulwid/dbulli.length);
for(var i = 0; i < dbulli.length; i++){
dbulli[i].style.width = dbliwid + "px";
dbulli[i].style.float = "left";
};
// 在滚动焦点插入相应数量的li
for(var i = 1; i <= dbulli.length; i++){
var banhdli = document.createElement("li");
banhdli.innerHTML = i;
banhdli.setAttribute("on",i-1);
hdul.insertBefore(banhdli,hdul.childNodes[i]);
};
// 获取滚动焦点li并清除空格以及其他节点
var hdulli = hdul.childNodes;
for(var i = 0; i < hdulli.length; i++){
if(hdulli[i].nodeType != 1){
hdul.removeChild(hdulli[i]);
};
};
// 定义初始位置
hdulli[0].className = "on";
// 自动播放
var p = 0;
function banplay(){
p++;
for(var i = 0; i < hdulli.length; i++){
hdulli[i].className = "";
};
if(p >= hdulli.length){
p = 0;
};
hdulli[p].className = "on";
dbul.style.marginLeft = "-" + p*dbliwid + "px";
};
var d = setInterval(banplay,3000);
// 点击进行轮播函数
for(var i = 0; i < hdulli.length; i++){
hdulli[i].onclick = function (){
clearInterval(d);
for(var i = 0; i < hdulli.length; i++){
hdulli[i].className = "";
};
this.className = "on";
for(var i = 0; i < hdulli.length; i++){
if(hdulli[i].className == "on"){
if(hdulli[i].getAttribute = i){
dbul.style.marginLeft = "-" + i*dbliwid + "px";
};
}else if(hdulli[0].className == "on"){
dbul.style.marginLeft = 0;
};
};
var vii = 0;
for(var i = 0; i < hdulli.length; i++){
if(hdulli[i].className == "on"){
vii = hdulli[i].getAttribute;
};
};
p = vii;
d = setInterval(banplay,3000);
};
};
</script>
</body>
</html>
