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


Posted in Javascript onJuly 29, 2019

本文实例为大家分享了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(){
 //如果切?Q到最後一???D片?t重新?牡谝???始
 if(i>3){
 i=0;
 }
 //每?擅胱?幼x取下一???D片
 div_tab(i);
 i++;
 }
 setInterval("auto_tab_div()",1000);
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 #Javascript
javascript中this的用法实践分析
Jul 29 #Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 #Javascript
jquery.pager.js分页实现详解
Jul 29 #jQuery
javascript面向对象创建对象的方式小结
Jul 29 #Javascript
jquery.pager.js实现分页效果
Jul 29 #jQuery
vue-router跳转时打开新页面的两种方法
Jul 29 #Javascript
You might like
使用数据库保存session的方法
2006/10/09 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
jQuery的bind()方法使用详解
2015/07/15 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
第六章之辅组类与响应式工具
2016/04/25 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
详解Python中find()方法的使用
2015/05/18 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python将图片转base64,实现前端显示
2020/01/09 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
致全体运动员广播稿
2014/02/01 职场文书
安全生产活动月方案
2014/03/09 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
李白故里导游词
2015/02/12 职场文书
关于开学的感想
2015/08/10 职场文书