方法一:

  1. <script>
  2. var curIndex=0;//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下。
  3. var timeInterval=1000;
  4. var arr=new Array();
  5. arr[0]="images/1.jpg";
  6. arr[1]="images/2.jpg";
  7. arr[2]="images/3.jpg";
  8. arr[3]="images/4.jpg";
  9. setInterval(changeImg,timeInterval);
  10. function changeImg()
  11. {
  12. var obj=document.getElementById("obj");
  13. if (curIndex==arr.length-1)
  14. {
  15. curIndex=0;
  16. }
  17. else
  18. {
  19. curIndex+=1;
  20. }
  21. obj.src=arr[curIndex];
  22. }
  23. </script>
  24. <center>
  25. <img id=obj src =arr[curIndex] border =0>
  26. </center>

方法二:

  1. </div>
  2. <div style="float:left;width: 60%; height: 1500px; ">
  3. <ul id="img"style="width : 100%; height : 500px;">
  4. <li><img src="data:images/1.jpg"></li>
  5. <li><img src="data:images/2.jpg"></li>
  6. <li><img src="data:images/3.jpg"></li>
  7. <li><img src="data:images/4.jpg"></li>
  8. </ul>
  9.  
  10. </div>
  11. <script type="text/javascript">
  12. (function () {
  13. var i = 0;
  14. var $ = function (ID) { return document.getElementById(ID); };
  15. var timer = null, speed = 1000;
  16. $("img").getElementsByTagName("li")[0].style.display = "block";
  17. (function () {
  18. if (i >= $("img").getElementsByTagName("li").length) {
  19. for (var j = 0; j < $("img").getElementsByTagName("li").length; j++) {
  20. $("img").getElementsByTagName("li")[j].style.display = "none";
  21. }
  22. i = 1;
  23. $("img").getElementsByTagName("li")[0].style.display = "block";
  24. } else {
  25. for (var j = 0; j < $("img").getElementsByTagName("li").length; j++) {
  26. //console.log(j+""+i);
  27. if (j === i) {
  28. $("img").getElementsByTagName("li")[j].style.display = "block";
  29. } else {
  30. $("img").getElementsByTagName("li")[j].style.display = "none";
  31. }
  32. }
  33. i++;
  34. }
  35. timer = setTimeout(arguments.callee, speed);
  36. })();
  37. })();
  38. </script>

  

javascript实现简单的轮播图片的更多相关文章

  1. 简单html js css 轮播图片,不用jquery

    这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...

  2. 最简单的轮播广告(原生JS)

    改变每个图片的opacity属性:来自学友刘斌 素材图片: <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

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

    该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 ...

  5. 简要分析javascript的选项卡和轮播图

    选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...

  6. vue手写的轮播图片,解决已经修改data中的值,页面标签已绑定,但页面没效果

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...

  7. HTML练习二--动态加载轮播图片

    接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载: https://pan.baidu.com/s/1dhvzHwTHKiguy ...

  8. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  9. APP动态加载轮播图片

    如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...

随机推荐

  1. .net之工作流工程展示及代码分享(二)工作流引擎

    在介绍完表单类的时候,接下来介绍工作流引擎,主要由四个类组成,分别是流程.流程步骤.流程实例.流程步骤实例类. 流程类: [Serializable] public class Flow { [Xml ...

  2. 获取当前正在执行的Javascript脚本文件的路径

    获取当前JavaScript脚本文件的路径,在特定场景下可能需要,比如写模块加载器,或者进行日志记录.下面这段脚本适用于所有浏览器来获取正在执行js文件的路径,但是该方法只适用于脚本加载过程中执行的情 ...

  3. Window Azure ServiceBus Messaging消息队列技术系列2-编程SDK入门

    各位,上一篇基本概念和架构中,我们介绍了Window Azure ServiceBus的消息队列技术的概览.接下来,我们进入编程模式和详细功能介绍模式,一点一点把ServiceBus技术研究出来. 本 ...

  4. 在DOM中搜索元素

    方法 现代浏览器中使用XPath document.getElementById document/node.getElementsByTagName Limit search by parent e ...

  5. 通过servlet实现几个网站常用的功能

    帮朋友写的小程序,由于功能比较简单所以就偷懒只使用了Servlet 一.JSP页面部分(这个部分的设置比较粗糙,主要是为了查看功能能否实现,如果需要向用户展示还得修饰一下) 1)功能页(所有需要后台实 ...

  6. Saltstack之multi-master

    一.实验环境: 1.salt版本: [root@master master]# salt --versions-report Salt: 2015.5.10 Python: 2.7.5 (defaul ...

  7. linux的mount(挂载)命令详解

    本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用 ...

  8. [转]使用 Xcode 5 和 Interface Builder创建 Hello World App

    转载地址:http://www.ithome.me/archives/581.html 使用 Xcode 5 和 Interface Builder创建 Hello World App 发表回复 当x ...

  9. html(一)

    一丶网页的主体结构 <html><head> <title>标题</title> //浏览器的标题</head><body>   ...

  10. Linux内核分析:dup、dup2的实现

    一.首先需要看一下这两个函数的作用: #include <unistd.h> int dup(int oldfd); int dup2(int oldfd, int newfd); 根据m ...