简单的JS图片切换-JS特效-爱易网页

简单的JS图片切换

日期：2014-05-18　浏览次数：20785 次

以下是程序代码

<!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=gb2312" />
<title>简单的JS图片切换 www.aiyiweb.com</title>
<style>
p.now{ display:block; border:1px solid #ccc}
li.aiyiweb_com{ 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>
应有尽有的网页特效网址：<a href="http://js.aiyiweb.com">http://js.aiyiweb.com</a>
<hr />
<div id="fd">
<p class="aiyiweb_com"><a href="http://www.aiyiweb.com">www.aiyiweb.com</a></p>
<p style="display:none"><a href="http://js.aiyiweb.com/">网页特效</a></p>
<p style="display:none"><a href="http://bbs.aiyiweb.com/">论坛系统</a></p>
<p style="display:none"><a href="http://mb.aiyiweb.com/">模板素材</a></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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

简单的JS图片切换

相关资料更多>

推荐阅读更多>