javascript实现简单的轮播图片
方法一:
- <script>
- var curIndex=0;//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下。
- var timeInterval=1000;
- var arr=new Array();
- arr[0]="images/1.jpg";
- arr[1]="images/2.jpg";
- arr[2]="images/3.jpg";
- arr[3]="images/4.jpg";
- setInterval(changeImg,timeInterval);
- function changeImg()
- {
- var obj=document.getElementById("obj");
- if (curIndex==arr.length-1)
- {
- curIndex=0;
- }
- else
- {
- curIndex+=1;
- }
- obj.src=arr[curIndex];
- }
- </script>
- <center>
- <img id=obj src =arr[curIndex] border =0>
- </center>
方法二:
- </div>
- <div style="float:left;width: 60%; height: 1500px; ">
- <ul id="img"style="width : 100%; height : 500px;">
- <li><img src="data:images/1.jpg"></li>
- <li><img src="data:images/2.jpg"></li>
- <li><img src="data:images/3.jpg"></li>
- <li><img src="data:images/4.jpg"></li>
- </ul>
- </div>
- <script type="text/javascript">
- (function () {
- var i = 0;
- var $ = function (ID) { return document.getElementById(ID); };
- var timer = null, speed = 1000;
- $("img").getElementsByTagName("li")[0].style.display = "block";
- (function () {
- if (i >= $("img").getElementsByTagName("li").length) {
- for (var j = 0; j < $("img").getElementsByTagName("li").length; j++) {
- $("img").getElementsByTagName("li")[j].style.display = "none";
- }
- i = 1;
- $("img").getElementsByTagName("li")[0].style.display = "block";
- } else {
- for (var j = 0; j < $("img").getElementsByTagName("li").length; j++) {
- //console.log(j+""+i);
- if (j === i) {
- $("img").getElementsByTagName("li")[j].style.display = "block";
- } else {
- $("img").getElementsByTagName("li")[j].style.display = "none";
- }
- }
- i++;
- }
- timer = setTimeout(arguments.callee, speed);
- })();
- })();
- </script>
javascript实现简单的轮播图片的更多相关文章
- 简单html js css 轮播图片,不用jquery
这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...
- 最简单的轮播广告(原生JS)
改变每个图片的opacity属性:来自学友刘斌 素材图片: <!DOCTYPE html> <html lang="en"> <head> &l ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- 轮播图片 高效图片轮播,两个imageView实现
该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 ...
- 简要分析javascript的选项卡和轮播图
选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...
- vue手写的轮播图片,解决已经修改data中的值,页面标签已绑定,但页面没效果
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...
- HTML练习二--动态加载轮播图片
接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载: https://pan.baidu.com/s/1dhvzHwTHKiguy ...
- 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应
官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...
- APP动态加载轮播图片
如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...
随机推荐
- .net之工作流工程展示及代码分享(二)工作流引擎
在介绍完表单类的时候,接下来介绍工作流引擎,主要由四个类组成,分别是流程.流程步骤.流程实例.流程步骤实例类. 流程类: [Serializable] public class Flow { [Xml ...
- 获取当前正在执行的Javascript脚本文件的路径
获取当前JavaScript脚本文件的路径,在特定场景下可能需要,比如写模块加载器,或者进行日志记录.下面这段脚本适用于所有浏览器来获取正在执行js文件的路径,但是该方法只适用于脚本加载过程中执行的情 ...
- Window Azure ServiceBus Messaging消息队列技术系列2-编程SDK入门
各位,上一篇基本概念和架构中,我们介绍了Window Azure ServiceBus的消息队列技术的概览.接下来,我们进入编程模式和详细功能介绍模式,一点一点把ServiceBus技术研究出来. 本 ...
- 在DOM中搜索元素
方法 现代浏览器中使用XPath document.getElementById document/node.getElementsByTagName Limit search by parent e ...
- 通过servlet实现几个网站常用的功能
帮朋友写的小程序,由于功能比较简单所以就偷懒只使用了Servlet 一.JSP页面部分(这个部分的设置比较粗糙,主要是为了查看功能能否实现,如果需要向用户展示还得修饰一下) 1)功能页(所有需要后台实 ...
- Saltstack之multi-master
一.实验环境: 1.salt版本: [root@master master]# salt --versions-report Salt: 2015.5.10 Python: 2.7.5 (defaul ...
- linux的mount(挂载)命令详解
本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用 ...
- [转]使用 Xcode 5 和 Interface Builder创建 Hello World App
转载地址:http://www.ithome.me/archives/581.html 使用 Xcode 5 和 Interface Builder创建 Hello World App 发表回复 当x ...
- html(一)
一丶网页的主体结构 <html><head> <title>标题</title> //浏览器的标题</head><body> ...
- Linux内核分析:dup、dup2的实现
一.首先需要看一下这两个函数的作用: #include <unistd.h> int dup(int oldfd); int dup2(int oldfd, int newfd); 根据m ...