本文實(shí)例為大家分享了js自動(dòng)輪換選項(xiàng)卡的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
代碼：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標(biāo)題文檔</title><style>*{padding:0;margin:0;}ul{list-style:none;}#content{width:300px;height:200px;margin:150px auto;border:10px solid #ccc;padding:10px;}#top{width:300px;height:50px;background:#ccc;}#top a{height:50px;line-height:50px;font-size:20px;text-decoration:none;color:#000;display:inline-block;padding:0 10px;}#top a.active{background:yellow;}#main{width:300px;height:150px;background:#f1f1f1;}#main img{width:200px;height:150px;}#main ul{width:100px;height:150px;display:inline-block;float:right;}#main ul li{width:100px;height:50px;background:#f1f1f1;border-bottom:1px dotted #000;line-height:50px;text-align:center;}#main ul li.active{background:blue;}</style><script>window.onload = function () { var content = document.getElementById('content'); var top = document.getElementById('top'); var aA = top.getElementsByTagName('a'); var main = document.getElementById('main'); var img = main.getElementsByTagName('img')[0]; var aLi = main.getElementsByTagName('li'); var arr = [ { title : '動(dòng)漫', subtitle : ['波波鳥','白魔女','小龍女'], pics : ['img/1.png','img/2.png','img/3.png'], }, { title : '購物', subtitle : ['頭盔','雪橇','內(nèi)衣'], pics : ['img/4.png','img/5.png','img/6.png'], } ]; var row = 0, col = 0; var timer = null; for ( var i = 0; i < arr.length; i++ ) { aA[i].innerHTML = arr[i].title; aA[i].index = i; aA[i].onmouseover = function () { tab(this.index); } } tab(0); content.onmouseover = function () { for ( var i = 0; i < aA.length; i++ ) { if (aA[i].className === 'active') { row = i; break; } } for ( var i = 0; i < aLi.length; i++ ) { if (aLi[i].className === 'active'){ col = i; break; } } clearInterval(timer); } content.onmouseout = autoPlay; // 自動(dòng)播放 function autoPlay() { clearInterval(timer); timer = setInterval(function () { // 子標(biāo)題++，逢子標(biāo)題長度， // 并且主標(biāo)題加1， // 當(dāng)子標(biāo)題和主標(biāo)題當(dāng)前inded=長度時(shí)，歸0 col++; if(col === aLi.length) row++; row %= aA.length; col %= aLi.length; for ( var i = 0; i < aLi.length; i ++ ) { aLi[i].className = ''; } aLi[col].className = 'active'; img.src = arr[row].pics[col]; for ( var i = 0; i < aLi.length; i++ ) { aLi[i].innerHTML = arr[row].subtitle[i]; } for ( var i = 0; i < aA.length; i ++ ) { aA[i].className = ''; } aA[row].className = 'active'; }, 2000); } autoPlay(); function tab(index) { for ( var i = 0; i < aA.length; i++ ){ aA[i].className = ''; } aA[index].className = 'active'; for ( var j = 0; j < arr[index].subtitle.length; j++ ) { aLi[j].innerHTML = arr[index].subtitle[j]; aLi[j].index = j; aLi[j].onmouseover = function () { for ( var i = 0; i < aLi.length; i ++ ) { aLi[i].className = ''; } this.className = 'active'; img.src = arr[index].pics[this.index]; } } img.src = arr[index].pics[0]; for ( var i = 0; i < aLi.length; i++ ){ aLi[i].className = ''; } aLi[0].className = 'active'; }}</script></head><body><div id="content"> <div id="top"> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> <div id="main"> <img/> <ul> <li></li> <li></li> <li></li> </ul> </div></div></body></html>以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
