8顶

简单的JS图片切换

稿源：互联网 2022-06-15 18:23:58 点击： 17356 撤稿纠错

简单的JS图片切换，现在是很纯的页面而已，自己下下来改改吧。

以下讨论的是和JS图片切换相关的简单的JS图片切换教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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.alixixi.com</title>
<style>
p.now{ display:block; border:1px solid #ccc}
li.alixixi_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.alixixi.com">http://js.alixixi.com</a>
<hr />
<div id="fd">
<p class="alixixi_com"><a href="http://www.alixixi.com">www.alixixi.com</a></p>
<p style="display:none"><a href="http://js.alixixi.com/">网页特效</a></p>
<p style="display:none"><a href="http://bbs.alixixi.com/">论坛系统</a></p>
<p style="display:none"><a href="http://mb.alixixi.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>

关于简单的JS图片切换的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009062456390.shtml方便下次再访问哦。

·上一篇： js实现的滑动TAB，很简单
·下一篇： 可拖动及显示轨迹的特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

简单的JS图片切换

文章分类LIST >>返回首页

最新游戏

最新新闻