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 相关文章推荐
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
redux.js详解及基本使用
May 24 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
小程序自定义圆形进度条
Nov 17 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
用PHP生成自己的LOG文件
2006/10/09 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
Python实现简单的代理服务器
2015/07/25 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python学生信息管理系统
2018/03/13 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
历史系自荐信范文
2013/12/24 职场文书
学年末自我鉴定
2014/01/21 职场文书
领导干部考察材料
2014/02/08 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
综合素质自我评价评语
2015/03/06 职场文书
就业推荐表院系意见
2015/06/05 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python