<!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. 多线程——工具类之Semaphore

    一.Semaphore功能介绍 Semaphore类相当于线程计数器,在获取Semaphore对象时设定可以产生的线程总数(线程并不是Semaphore类生成的,它只是统计线程的数量),创建Semap ...

  2. ngix_http_stub_status_module

    1.ngx_http_stub_status_module 是一个 Nginx 的内置 HTTP 模块,该模块可以提供 Nginx 的状态信息.默认情况下这个模块是不被编译进来的,所以在编译 Ngin ...

  3. Algorithm --> 并查集

    并查集 主要解决图的连通性问题,比如: 1.随意给你两个点,让你判断它们是否连通: 2.问你整幅图一共有几个连通分支: 初始化: void init(int size) { ; i < size ...

  4. 斑马ZPL指令加入如换行、回车等控制符的方法

    在程序中可能会被过滤掉,直接在指令中加入ASCII对应的16进制字符即可解决改问题, 语法:_十六进制(ASCII) 栗子:hello_0D_0Aworld  换行 扫描结果: hello world

  5. python全栈开发-Day9 函数对象、函数嵌套、名称空间与作用域

    一 .函数对象 一 .函数是第一类对象,即函数可以当作数据传递 可以被引用 可以当作参数传递 返回值可以是函数 可以当作容器类型的元素 二. 利用该特性,优雅的取代多分支的if def foo(): ...

  6. ASP.NET Core原理概述

    ASP.NET Core 是一个控制台应用程序,在其 main 方法中创建一个Web服务器,以下是program.cs中的代码: using Microsoft.AspNetCore; using M ...

  7. JDK1.8源码(六)——java.util.LinkedList 类

    上一篇博客我们介绍了List集合的一种典型实现 ArrayList,我们知道 ArrayList 是由数组构成的,本篇博客我们介绍 List 集合的另一种典型实现 LinkedList,这是一个有链表 ...

  8. C作业--数据类型

    一.PTA实验作业 题目1:7-3 倒顺数字串 1. 本题PTA提交列表 2. 设计思路(伪代码) (1)本题是要求输入倒顺序数串,首先看到这种题肯定是需要用到循环,那就先定一个整形i来进行循环,n是 ...

  9. Beta冲刺 第七天

    Beta冲刺 第七天 昨天的困难 昨天的困难在一些多表查询上,不熟悉hibernate的套路,走了很多弯路. 第一次使用图表插件,在图表的显示问题上花了一定的时间. 对于页面绑定和后台数据自动填充的理 ...

  10. 冲刺No.3

    Alpha冲刺第三天 站立式会议 项目进展 今日团队对CSS与JS的基础知识进行了应用,并对网站的UI设计进行了讨论,对数据库设计进行了进一步的探讨,基本确立了各个表单的结构和内容.分割出项目基本模块 ...