用5个div,布局从左到右5张图片,从左到右5个div分别指定ID为img1,img2,img3,img4,img5.(背景是relative,5个div是相对于背景absolute定位)

显示如下:

方法一:(把一个div直接赋值给另一个,轮播一次要for循环5下)

 function autoplay(){
var x,y,baoliu;
baoliu=document.getElementById("img5").style.backgroundImage;
for(i=5;i>0;i--){
y=document.getElementById("img"+i);
if(i==1){
x=baoliu;
y.style.backgroundImage=x;
}
else{
x=document.getElementById("img"+(i-1));
y.style.backgroundImage=x.style.backgroundImage;
}
}
}

方法二:(两两互相交换,轮播一次for循环4下)

 function autoplay(){
var x,y,baoliu;
for(i=5;i>1;i--){
x=document.getElementById("img"+(i-1));
y=document.getElementById("img"+i);
baoliu=y.style.backgroundImage;
y.style.backgroundImage=x.style.backgroundImage;
x.style.backgroundImage=baoliu;
}
}

轮播一次的结果:

关于这两种方法到底孰优孰劣,有待精学后分析。

js自动轮播图片的两种循环方法(原创)的更多相关文章

  1. JS中定义对象原型的两种使用方法

    第一种: function Person() { this.username = new Array(); this.password = "123"; } Person.prot ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. 原生js手动轮播图

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...

  4. 移动Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  5. 移动站Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  6. [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  7. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  8. JS中的两种刷新方法以及区别和适用范围

    在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了. 所以我就想用js ...

  9. js如何动态创建表格(两种方法)

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

随机推荐

  1. php-into 安装时遇到的各种问题,php -m跟phpinfo()显示不一致

    系统环境 阿里云服务器 ubuntu nginx php5.4.23 在Yii2中格式显示用户currency,所以需要intl模块,没啥说的装吧. apt-get install libicu-de ...

  2. 【推荐】CentOS安装PHP-5.6.4+扩展安装+安全配置+性能配置

    注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. #准备工作# 前段时间PHP官方发布了一个重要的安全升级公告,修复了两个unserialize函数的严重漏洞,目前受影响的版本有: ...

  3. easyUI的基础布局easyui-accordion

    ---恢复内容开始--- <html> <head> <meta charset="UTF-8"> <title>树状图</t ...

  4. ubuntu安装pppoeconf后与networkmanager冲突

    使用pppoeconf拨号后,Network Manager显示设备未托管的解决办法: 在终端中输入以下命令,来配置网络连接管理文件: sudo gedit /etc/NetworkManager/n ...

  5. Selenium-java-Log4j环境搭建和

    1 导入Log4j ,我这版本是1.2.17  自己选择版本  **别告诉我不会导入 2  Path  奶瓶 3 创建一个与src同目录文件 命名为 log4.properties 4 文件的内容是, ...

  6. C#简单的对象交互

    在对象的世界里,一切皆为对象;对象与对象相互独立,互不干涉,但在一定外力的作用下对象开始共同努力 对象交互的实例 电视机大家都有吧,依照万物皆对象的思维模式来看,电视机可以是一个类,然后电视机有一些基 ...

  7. 数组为什么可以使用linq查询

    问题引出 这视乎是个完全不必要进行讨论的话题,因为linq(这里具体是linq to objects)本来就是针对集合类型的,数组类型作为集合类型的一种当然可以使用了.不过我还是想写一下,这个问题源于 ...

  8. 关于GIT合并出错的记录

    今天给美术解决GIT资源冲突时碰到的问题,搞了挺长时间终于解决了.参看下面这个网址:http://www.bujichong.com/m/68 今天git一小部分代码发现出错了, 上网查了一下, 大体 ...

  9. python网络编程-TCP协议中的三次握手和四次挥手(图解)

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...

  10. 庆祝下,提交了第一个ceph pull request。实现了从0到1的突破

    庆祝一下!经过社区老司机的带路,昨天提交了第一个ceph pull request.实现了从0到1的突破,希望再接再厉提交更多代码到社区,为社区发展贡献一点自己力量. 提交的第一个被社区fix的bug ...