<!DOCTYPE html>
<html>
<head>
<script>
var time;
function init(){
//获取div里面的东西
time=setInterval("show()",3000);
setInterval("show1()",3000);
}
var num=1;
function show1(){
if(num>3){
num=1;
}
var imageObj=document.getElementById("divshow1");
imageObj.src="img/"+ num++ +".jpg";
}
function show(){
var divshow = document.getElementById("divshow");
divshow.style.display="none";
clearInterval(time);
time =setInterval("hidden()",3000)
}
function hidden(){
var divshow=document.getElementById("divshow");
divshow.style.display="block";
clearInterval(time);
time =setInterval("show()",1000)
}


</script>
</head>

<body onload="init()">
<div id="divshow" style="width: 99%; display: block;"><img src="img/1.jpg" width="100%" id="divshow1"/></div>
</body>
</html>

JavaScript实现轮播图（隔3秒显示一张图）的更多相关文章

  1. Vue-Awesome-Swiper实现缩略图控制循环,循环背景图，显示多图轮播，点击左右滚动一张图

    效果图: 本姐只展示关键代码哈 上代码:网站有完整代码,但是数据不是循环的.https://surmon-china.github.io/vue-awesome-swiper/ 循环数据的代码在此: ...

  2. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  3. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  4. JavaScript banner轮播 左右切换 圆点点击切换

    1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. 第一百五十五节，封装库--JavaScript，轮播器

    封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...

  6. UIScrollerView当前显示3张图

    代码地址如下:http://www.demodashi.com/demo/11173.html WSLScrollView 功能描述:这是在继承UIView的基础上利用UIScrollerView进行 ...

  7. javascript简单轮播图

    **轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...

  8. 原生javascript焦点轮播图

    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

随机推荐

  1. flex布局之兼容

    Android 2.3 开始就支持旧版本 display:-webkit-box; 4.4 开始支持标准版本 display: flex; IOS  6.1 开始支持旧版本 display:-webk ...

  2. 【Zabbix】在CentOS7上安装Zabbix3.0

    Zabbix安装 首先说明一下,本文主要参考了[http://www.linuxidc.com/Linux/2016-11/137030.htm]和[http://www.cnblogs.com/XY ...

  3. 基于 IJKPlayer-concat 协议的视频无缝拼接技术实现

    一.前言 Hi,大家好,我是承香墨影! 开门见山,开篇名义.今天来聊聊如何将多段视频,拼接成一个完整而连续的视频,然后无缝进行播放. 这样的需求应该不算偏门吧? 最简单的就是一些视频 App,会将大段 ...

  4. Java基础学习笔记十一 Eclipse开发工具

    Eclipse是功能强大Java集成开发工具.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公司中,使用的就是Eclipse进行开发. Eclipse的下载.安装.卸载 下载 http:/ ...

  5. linux分析、诊断及调优必备的“杀器”之二

    先说明下,之所以同类内容分成多篇文章,不是为了凑篇数,而是为了便于自己和大家阅读,下面继续: 7.sar The sar command is used to collect, report, and ...

  6. 201621123062《java程序设计》第九周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 思维导图1:(对集合部分做了一些改动和细化) 思维导图2:(泛型) 1.2 选做:收集你认为有用的代码片段 代 ...

  7. 团队作业4——第一次项目冲刺（Alpha版本)2017.11.19

    第三次会议:2017-11-16 第二次会议讨论的还没有完全实现,于是在第三次会议上对此进行了一些对我们工作上的看法,得出结论:多花时间啊!!!! 又没照照片图: 会议主要内容: 1.登录注册完善 2 ...

  8. maven（二）创建工程

    创建动态Web工程打war包 ​ File→new→Maven Project→勾上create a simple project→然后next> ​ 然后会报一下的错 ​ 解决 ​ 创建jav ...

  9. vue的简单tab

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  10. requestAnimationFrame Web中写动画的另一种选择

    HTML5和CSS3盛行的今天  动画变得很简单实现 我们可以用transition . animation + keyframe .也可以用canvas等 我在上一篇 点击回到顶部的文章中发现的这个 ...