js实现多张图片每隔一秒切换一张图片

2024-05-06 16:53:46

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现多张图片每隔一秒切换图片的具体代码，供大家参考，具体内容如下

<head>  <meta charset="UTF-8">  <title></title>  <script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.min.js"></script></head><body style="background-color: pink">  <div id="carousel" style="border:1px solid #000000; float:left; width:400px;">    <div id="tabpic">      <div style="display:block;"><img src="/images/1.jpg" width="400px" height="400px"/></div>      <div style="display:none;"><img src="/images/2.jpg" width="400px" /></div>      <div style="display:none;"><img src="/images/3.jpg" width="400px" /></div>      <div style="display:none;"><img src="/images/4.jpg" width="400px" /></div>    </div>    <div style="float:right;">      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="tablink" οnclick="div_tab(0)" style="color:#ff0000;">1</a>      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="tablink" οnclick="div_tab(1)" style="color:#0000ff;">2</a>      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="tablink" οnclick="div_tab(2)" style="color:#0000ff;">3</a>      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="tablink" οnclick="div_tab(3)" style="color:#0000ff;">4</a>    </div>  </div></body><script type="text/javascript">  function div_tab(tabName){    var tabLinkArr=document.getElementsByName("tablink");    var tabPicArr=document.getElementById("tabpic").getElementsByTagName("div");    for(var i=0;i<tabLinkArr.length;i++){      if(i==tabName){        tabLinkArr[i].style.color="#ff0000";        tabPicArr[i].style.display="block";      } else{        tabLinkArr[i].style.color="#0000ff";        tabPicArr[i].style.display="none";      }    }  }  var i=0;  function auto_tab_div(){  //如果切換到最後一張圖片則重新從第一張開始  if(i>3){    i=0;  }  //每兩秒自動讀取下一張圖片  div_tab(i);    i++;  }  setInterval("auto_tab_div()",1000);</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：javascript面向对象程序设计实践常用知识点总结

下一篇：JavaScript面向对象程序设计中对象的定义和继承详解