亿联网自助建站平台 开启企业建站营销新时代、免费建站平台倡导者  站长学院  高端定制请点这里
热线:13913253836
您现在的位置:首页 > 站长学院 > 建站资讯 > 建站、设计教程 > 幻灯片和轮播图

js文字图片轮播效果代码

作者:eycms 日期:2016-02-16 17:30:59 人气:122

  

<!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 />权益</p></li>

<li><span>表二</span><p>户籍管理<br />权益</p></li>

<li><span>表三</span><p>户籍管理<br />权益</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当前显示的是第几个,autotime自动切换时间


dl[0].className="on",il[0].className="on";


//切换函数

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>


回到顶部