脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js每隔一秒切换图片

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

 更新时间：2019年07月29日 09:48:11   作者：qiupu4667  
这篇文章主要为大家详细介绍了js实现多张图片每隔一秒切换一张图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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)" name="tablink" οnclick="div_tab(0)" style="color:#ff0000;">1</a>
  <a href="javascript:void(0)" name="tablink" οnclick="div_tab(1)" style="color:#0000ff;">2</a>
  <a href="javascript:void(0)" name="tablink" οnclick="div_tab(2)" style="color:#0000ff;">3</a>
  <a href="javascript:void(0)" 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>

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

您可能感兴趣的文章:

相关文章

  • 将json当数据库一样操作的javascript lib

    将json当数据库一样操作的javascript lib

    使用javascript操作JSON的类库TAFFY DB，具体介绍了：查询数据、添加数据、删除数据、修改数据。
    2013-10-10
  • 微信小程序实现弹出输入框代码实例

    微信小程序实现弹出输入框代码实例

    最近在写一个微信小程序,有一个需求是点击一个按钮后,出现一个输入框,然后根据用户的输入再进行操作,所以这篇文章主要给大家介绍了关于微信小程序实现弹出输入框的相关资料,需要的朋友可以参考下
    2023-09-09
  • js实现图片无缝滚动特效

    js实现图片无缝滚动特效

    这篇文章主要为大家详细介绍了js实现图片无缝循环滚动特效的相关资料，本实例在网页中较为常见，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 不用MOUSEMOVE也能滑动啊

    不用MOUSEMOVE也能滑动啊

    不用MOUSEMOVE也能滑动啊...
    2007-05-05
  • javascript调试说明

    javascript调试说明

    自从AJAX崛起后，javascript的程序越来越庞大，不得不考虑到各种测试。
    2010-06-06
  • Webpack打包字体font-awesome的方法示例

    Webpack打包字体font-awesome的方法示例

    本篇文章主要介绍了Webpack打包字体font-awesome的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • js字符编码函数区别分析

    js字符编码函数区别分析

    js对文字编码有3个函数： escape,encodeURI,encodeURIComponent， 对应的解码函数：unescape,decodeURI,decodeURIComponent
    2011-12-12
  • JavaScript字符串检索字符的方法

    JavaScript字符串检索字符的方法

    这篇文章主要为大家详细介绍了JavaScript字符串检索字符的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js实现的星星评分功能函数

    js实现的星星评分功能函数

    这篇文章主要介绍了js实现的星星评分功能函数,涉及JavaScript响应鼠标事件实现针对页面元素的遍历与样式属性的修改技巧,非常简单实用的代码,需要的朋友可以参考下
    2015-12-12
  • 深入浅析JS中的严格模式

    深入浅析JS中的严格模式

    严格模式就是使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。下面通过代码相结合的形式给大家介绍js中的严格模式，感兴趣的朋友一起看看吧
    2018-06-06

最新评论