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实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
Jquery解析json数据详解
Dec 26 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
基于Angularjs实现分页功能
May 30 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
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操作Memcache实例介绍
2013/06/14 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
Python yield使用方法示例
2013/12/04 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python文件操作方法详解
2020/02/09 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
物流经理自我评价
2013/09/23 职场文书
2014年科协工作总结
2014/12/09 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书