JavaScript实现轮播图(隔3秒显示一张图)
<!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秒显示一张图)的更多相关文章
- Vue-Awesome-Swiper实现缩略图控制循环,循环背景图,显示多图轮播,点击左右滚动一张图
效果图: 本姐只展示关键代码哈 上代码:网站有完整代码,但是数据不是循环的.https://surmon-china.github.io/vue-awesome-swiper/ 循环数据的代码在此: ...
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- JavaScript banner轮播 左右切换 圆点点击切换
1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 第一百五十五节,封装库--JavaScript,轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
- UIScrollerView当前显示3张图
代码地址如下:http://www.demodashi.com/demo/11173.html WSLScrollView 功能描述:这是在继承UIView的基础上利用UIScrollerView进行 ...
- javascript简单轮播图
**轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...
- 原生javascript焦点轮播图
刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
随机推荐
- 开源一个定时任务调度器 webscheduler
在企业应用中定时任务调度的需求是必不可少的,比如定时同步数据,定时结转数据,定时检测异常等等.公司之前是在使用一款采用.net 开发的windows服务形式的定时程序,基本能满足需求,在一段时间的时候 ...
- C#内存泄漏--event内存泄漏
内存泄漏是指:当一块内存被分配后,被丢弃,没有任何实例指针指向这块内存, 并且这块内存不会被GC视为垃圾进行回收.这块内存会一直存在,直到程序退出.C#是托管型代码,其内存的分配和释放都是由CLR负责 ...
- linux --> 获取系统启动时间
获取系统启动时间 一.前言 时间对操作系统来说非常重要,从内核级到应用层,时间的表达方式及精度各部相同.linux内核里面用一个名为jiffes的常量来计算时间戳.应用层有time.getdaytim ...
- Algorithm --> 动态规划
动态规划 出处:http://hawstein.com/posts/dp-novice-to-advanced.html 什么是动态规划? 动态规划算法通常基于一个递推公式及一个或多个初始状态.当 ...
- attr与prop html与text
- ASP.NET没有魔法——ASP.NET MVC Razor与View渲染
对于Web应用来说,它的界面是由浏览器根据HTML代码及其引用的相关资源进行渲染后展示给用户的结果,换句话说Web应用的界面呈现工作是由浏览器完成的,Web应用的原理是通过Http协议从服务器上获取到 ...
- c语言的第三次---单程循环结构
一.PTA实验作业 题目1 1.代码 int N,i; double height; //height代表身高 char sex; //代表男女性别 scanf("%d",& ...
- Beta冲刺计划---Day0
Beta阶段报告---Day0 1.需要改进完善的功能 我们上一阶段开发由于开发时间匆忙,对于爬虫耗时的优化没有考虑.优化的空间我在Alpha阶段的总结报告里说过,具体看下图. 这张图显示出爱 ...
- Flask jinja2 全局函数,宏
内置全局函数 dict()函数,方便生成字典型变量 {% set user = dict(name='Mike',age=15) %} <p>{{ user | tojson | safe ...
- WebApi一个控制器中定义多个Get方法。
问题:怎样解决一个ApiController中定义多个Get方法或者Post方法? 答:要想实现一个ApiController中定义多个Get方法或者Post方法,则需要在WebApiConfig类中 ...