html定时器播放图片,多层嵌套图片自动轮播.html

多层嵌套图片轮播

body,ul,p,h1,h2,h3,h4,h5,h6,form,dl,dd,select,input,textarea {

margin:0;

padding:0;

font-family:"宋体";

}

li {

list-style-type:none;

}

img {

border:none;

}

a {

text-decoration:none;

}

#wrap {

width:400px;

height:255px;

margin:50px auto;

border:1px solid #ccc;

padding:10px 20px;

position:relative;

}

#wrap #nav {

width:400px;

height:30px;

margin:0 auto;

}

#nav li {

float:left;

width:158px;

height:20px;

padding:5px 20px;

line-height:20px;

text-align:center;

}

#nav li:first-child {

border-right:2px solid #ccc;

}

#wrap img {

position:absolute;

left:22px;

top:55px;

width:180px;

height:200px;

}

.list {

width:180px;

height:200px;

position:absolute;

right:33px;

top:55px;

border:1px solid #ccc;

display:none;

}

.list li {

width:160px;

height:29px;

padding:5px 10px;

border-bottom:1px solid #ccc;

line-height:29px;

text-align:center;

}

window.onload = function () {

var oDiv = document.getElementById("wrap");

var oNav = document.getElementById("nav");

var oImg = oDiv.getElementsByTagName("img")[0];

var aUl = oDiv.getElementsByTagName("ul");

var arrLi = [];

var arrImg = ["img2/01.jpg","img2/02.jpg","img2/03.jpg","img2/04.jpg","img2/05.jpg","img2/06.jpg","img2/07.jpg","img2/08.jpg","img2/09.jpg","img2/10.jpg"];

var num = 0;

var timer = null;

var flag = 1;

for(var i=1; i

var aLi = aUl[i].getElementsByTagName("li");

for(var j=0; j

arrLi.push(aLi[j]);

}

}

function clearAll() {

for(var i=0; i

arrLi[i].style.cssText = "background:#eee; color:#000";

}

for(var i=0; i

aUl[0].getElementsByTagName("li")[i].style.cssText = "background:#999; color:#000";

}

}

function autoPlay() {

clearAll();

arrLi[num].style.cssText = "background:pink;color:blue";

oImg.src = arrImg[num];

if(flag == 1) {

aUl[0].getElementsByTagName("li")[0].style.cssText = "background:green;color:#fff";

aUl[1].style.display = "block";

aUl[2].style.display = "none";

num++;

if(num == arrLi.length/2) {

flag = 0;

}

}else {

aUl[0].getElementsByTagName("li")[1].style.cssText = "background:green; color:#fff";

aUl[1].style.display = "none";

aUl[2].style.display = "block";

num++;

if(num == arrLi.length) {

flag = 1;

num = 0;

}

}

}

timer = setInterval( autoPlay,1000 );

}

• 项目一
• 项目二

• 商品1
• 商品2
• 商品3
• 商品4
• 商品5

• 商品6
• 商品7
• 商品8
• 商品9
• 商品10

一键复制

编辑

Web IDE

原始数据

按行查看

历史