查看文章 |
js图片轮播效果【原创教程】
2009年01月13日 星期二 19:43
以前都是直接改别人的，近日闲来无事就自个写了个，旨在普及下Js教育。 为了方便展示实现的逻辑，我把没个功能都单独写成了一个函数。 代码如下： function $(id){return document.getElementById(id)}//获取ID节点的简介方法 var tags=$("fd").getElementsByTagName("li");//获取切换按钮节点 var cats=$("fd").getElementsByTagName("p");//获取切换内容节点 var current;//设置当前帧的变量容器 var timer=3000;// function disAll(){//初始所有标签样式 for(var i=0; i<tags.length; i++){ tags[i].className=""; cats[i].className=""; cats[i].style.display="none"; } } function setNow(){//获取当前帧的索引值 for(var i=0; i<tags.length; i++){ if(tags[i].className=="now"){ current=i; } } } for(var j=0; j<tags.length; j++){//设置手动切换 tags[j].onmouseover=function(){ clearInterval(h); disAll(); this.className="now"; setNow(); cats[current].style.display="block"; cats[current].className="now"; } tags[j].onmouseout=function(){ setNow(); h=setInterval("goNext()",3000); } } function goNext(){//自动切换 setNow();//获取当前帧索引 current+=1;//帧自增1 if(current>=parseInt(tags.length)){//判断：如果当前帧索引值是否大于切换按钮总数，如果大于按钮总数则回到初始状态 current=0; disAll(); cats[0].style.display="block"; tags[0].className="now"; cats[0].className="now"; } else{ disAll(); cats[current].style.display="block"; cats[current].className="now"; tags[current].className="now"; } } var h=setInterval("goNext()",timer)//开始自动切换 全部代码： [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> p.now{ display:block; border:1px solid #ccc} li.now{ color:red} li{ list-style:none;float:left; padding:0 10px; border:1px solid #ccc} #fd{position:absolute; left:100px; top:100px;height:20px; width:600px; background:#ccc} </style> </head> <body> <div id="fd"> <p class="now">1</p> <p style="display:none">2</p> <p style="display:none">3</p> <p style="display:none">4</p> <ul> <li class="now">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script> function $(id){return document.getElementById(id)}//获取ID节点的简介方法 var tags=$("fd").getElementsByTagName("li");//获取切换按钮节点 var cats=$("fd").getElementsByTagName("p");//获取切换内容节点 var current;//设置当前帧的变量容器 var timer=3000;// function disAll(){//初始所有标签样式 for(var i=0; i<tags.length; i++){ tags[i].className=""; cats[i].className=""; cats[i].style.display="none"; } } function setNow(){//获取当前帧的索引值 for(var i=0; i<tags.length; i++){ if(tags[i].className=="now"){ current=i; } } } for(var j=0; j<tags.length; j++){//设置手动切换 tags[j].onmouseover=function(){ clearInterval(h); disAll(); this.className="now"; setNow(); cats[current].style.display="block"; cats[current].className="now"; } tags[j].onmouseout=function(){ setNow(); h=setInterval("goNext()",3000); } } function goNext(){//自动切换 setNow();//获取当前帧索引 current+=1;//帧自增1 if(current>=parseInt(tags.length)){//判断：如果当前帧索引值是否大于切换按钮总数，如果大于按钮总数则回到初始状态 current=0; disAll(); cats[0].style.display="block"; tags[0].className="now"; cats[0].className="now"; } else{ disAll(); cats[current].style.display="block"; cats[current].className="now"; tags[current].className="now"; } } var h=setInterval("goNext()",timer)//开始自动切换 </script> </body> </html> [/html] |
最近读者：
