海量企業(yè)網(wǎng)站模板 · 任您選擇
美出特色，精出品質(zhì)，一切為了企業(yè)更好的營銷
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org/1999/xhtml">
<head>
<title>js文字圖片輪播</title>
<style type="text/css">
<!--
* {margin:0; padding:0; font-size:12px;}
ul,li { list-style:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
#dd { width:303px; height:80px; margin:50px auto 0 auto; border:1px solid #ccc; border-right:none; overflow:hidden;}
#dd li { float:left; width:50px; height:80px; overflow:hidden;border-right:1px solid #ccc;}
#dd li span { width:50px; display:inline-block; text-align:center; line-height:80px;}
#dd li p { width:150px; display:inline-block;}
#dd li.on { width:200px;}
#ii { width:303px; margin:5px auto 0 auto;}
#ii li { float:left; width:10px; height:10px; margin:0 1px; background:#ccc; text-align:center; line-height:10px; cursor:pointer;}
#ii li.on{ background:#6CF;}
-->
</style>
</head>
<body>
<ul id="dd" class="clearfix">
<li><span>表一</span><p>戶籍管理<br />權(quán)益</p></li>
<li><span>表二</span><p>戶籍管理<br />權(quán)益</p></li>
<li><span>表三</span><p>戶籍管理<br />權(quán)益</p></li>
</ul>
<ul id="ii" class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
<!--
function newSlider(){
var dl=document.getElementById("dd").getElementsByTagName("li");
var il=document.getElementById("ii").getElementsByTagName("li");
var dlen = dl.length;
var timer = null,index = 0,autoTime = 3000;
//timer定時器，index當(dāng)前顯示的是第幾個，autotime自動切換時間
dl[0].className="on",il[0].className="on";
//切換函數(shù)
function play(j){
index = j;
stopAuto();//停止計時
for (var i=0;i<dlen ;i++ ){
dl[i].className="";
il[i].className="";
}
dl[j].className="on";
il[j].className="on";
startAuto();//重新開始計時
}
//mouseover表切換
for ( var i=0;i<dlen ;i++ ){
dl[i].onmouseover=function(j){
return function(){play(j);}
}(i)
}
//click按鈕切換
for ( var i=0;i<dlen ;i++ ){
il[i].onclick=function(j){
return function(){play(j);}
}(i)
}
//自動切換開始
function startAuto(){
timer = setInterval(function(){
index++;
index = index>dlen-1?0:index;
play(index);
},autoTime);
}
//自動切換停止
function stopAuto(){
clearInterval(timer);
}
//啟動自動切換
startAuto()
}
window.onload=function(){
newSlider();
}
//-->
</script>
</body>
</html></td>
</tr>
</table>
蘇公網(wǎng)安備32058302005702號