两张图片的轮播

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         var myinterval="";
 8         function changeimg(obj){
 9             if(obj.value=="开始"){
10                 obj.value="停止";
11                 myinterval=window.setInterval("startit()",20);
12             }else{
13                 obj.value="开始";
14                 window.clearInterval(myinterval);
15             }
16         }
17         function startit(){
18             var picarray=new Array("pic/01.jpg","pic/02.jpg","pic/03.jpg","pic/04.jpg",
19                     "pic/05.jpg","pic/06.jpg","pic/07.jpg");
20
21             var index=Math.round(Math.random()*picarray.length-1);//因为长度要比索引大要减1
22             var index2=Math.round(Math.random()*picarray.length-1);
23             index=index==-1?0:index;
24             document.getElementById("pc01").src=picarray[index];
25             index2=index2==-1?0:index2;
26             document.getElementById("pc02").src=picarray[index2];
27         }
28     </script>
29 </head>
30 <body>
31
32 <div id="div1">
33     <img src="pic/01.jpg" id="pc01">
34 </div>
35 <input type="button" value="开始" onclick="changeimg(this);">
36 <div id="div2">
37     <img src="pic/03.jpg" id="pc02">
38 </div>
39 </body>
40 </html>
时间: 2024-10-14 15:01:26

两张图片的轮播的相关文章

【JavaScript】使用Bootstrap来编写 图片轮播Carousel

图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小. 如果使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间. 同时说一下,Carousel这个词的本义是回旋木马. 一.基本目标 在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果,并且在每张图片下面配有图片说明. 由于笔者的电脑视频录制软件比较渣,也觉得没必要画太多时间在这上面,觉得只要能说明问题就行,所以下面的GIF失色比较严重,但

自定义完美的ViewPager 真正无限循环的轮播图

网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢将ViewPager的当前展示页设置为第1000页或者是10000页,这样用户一般情况下是滑不到边界的 例如有5张图片的轮播图,item的编号为(0,1,2,3,4)当前页的页号如果是5, 这时候就将编号设置为0,即 actPosition %= datas.size();这个公式就是这么来的 这种

84JS插件:jQuery版轮播图

一.代码分两个部分:1.HTML部分,根据注释处理即可:2.基于jQuery的play.js插件部分,这里为了展示效果,直接写在<html></html>下的<script></script>标签里.3.效果包含:自动轮播,焦点对齐,前进后退,直走不返,鼠标进入.轮播停止且前进后退图标出现,鼠标离开.轮播重启且前进后退图标隐藏.4.这里可以预览效果.二.轮播图原理说明:(1)轮播图(假设)有7张图片,“一”字排列,把第1张图片复制一次,放到第8张的位置,这样

轮播图--JS手写

轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Test</title> <script src="~/Scripts/jq

JQuery轮播图片效果

[目标] 制作一个有5张图片的轮播图 [分析] 想要制作轮播图,需要如下3个步骤: 1.页面打开之后,第一个图片显示,其余的图片,隐藏 2.图片间隔5秒轮播一次 3.传到第5个图后回到第1张 [制作] 1.页面打开之后,第一个图片显示,其余的图片,隐藏: $(“.bg”).not(“:eq(0)”).hide(); 2.间隔5秒轮播: Var i=0; $(function(){ $(“.bg”).not(“:eq(0)”).hide();   //不是第一张图片的其余图片都隐藏 setInte

【课堂实例】轮播图

[目标] 制作一个有5张图片的轮播图 [分析] 想要制作轮播图,需要如下3个步骤: 1.页面打开之后,第一个图片显示,其余的图片,隐藏 2.图片间隔5秒轮播一次 3.传到第5个图后回到第1张 [制作] 1.页面打开之后,第一个图片显示,其余的图片,隐藏: $(“.bg”).not(“:eq(0)”).hide(); 2.间隔5秒轮播: Var i=0; $(function(){ $(“.bg”).not(“:eq(0)”).hide();   //第一张图片隐藏 setInterval(fun

js+html+css实现轮播图

首先先把轮播图的结构搭建起来(html),代码如下:  结构可自行搭建,结构搭建完接着就是用css去进行修饰美化   此时的ul是没有给它设置固定的宽和高的,高可以先设置,宽不能,等下让图片一张接一张一的动起来,实际上是改变了ul的left值,ul的宽可以通过图片(li)的宽 乘以 图片数量即可得到,但是不能写死,所以ul的宽我们用js去获取设置,一起看下现在的效果 好了,结构已经搭建完了,现在只是静态的,我们需要用js去让它动起来,我们先获取html中需要用到的元素并把它存给变量,这里我事先存

UIimage两种初始化的区别 广告轮播封装

UIimage两种初始化的区别 第一种初始化: UIImage *image = [UIImage imageNamed:@"xxx"];  注意(这种方法加载的图片如果后缀名是png的,可以不写后缀名,根据屏幕分辨率自己去匹配图片) 第二种初始化: NSString *path = [[NSBundle mainBundle] pathForResource:@"xxx.png" ofType:nil]; UIImage *image = [[UIImage al

轮播图片 高效图片轮播,两个imageView实现

该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 性能好,占用内存少,轮播流畅 实际使用 我们先看demo,代码如下 运行效果 轮播实现步骤 接下来,笔者将从各方面逐一分析. 层级结构 最底层是一个UIView,上面有一个UIScrollView以及UIPageControl,scrollView上有两个UIImageView,imageView