JavaScript 图片轮播入门
轮播要求：
一个在页面居中的矩形框，图片依次从矩形框中经过 当图片完整占满矩形框时 停留一小段时间再向左边移动
经过矩形框的图片自动跑到右边最后一个图的后面。
核心原理：
在一个for循环中利用offsetleft（）不断向父元素的内边距左边或者右边添加值 使目标图片移动 并利用
settimeout（）的间隔xx毫秒执行一次函数的特点控制轮播的速度，再用一个判断控制图片完整占满矩形框
时的暂停时间。
也可以利用 setinterval（）间隔xx秒无限调用函数的特点来控制轮播速度
实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 192px;
height: 175px;
border: 1px solid gray;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#div1 img{
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/4.jpg" alt="" width="192"/>
<img src="img/3.jpg" alt="" width="192"/>
<img src="img/2.jpg" alt="" width="192"/>
<img src="img/1.jpg" alt="" width="192"/>
</div>
<div id="div2">
</div>
<script>
//获取页面元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var imgs = div1.getElementsByTagName('img');
//初始化页面图片的位置。window.onload 表示页面加载时执行某函数
window.onload=function(){
for(var i=0; i<imgs.length; i++){ //imgs.length 图片集合长度
imgs[i].style.left = i*192 + 'px';
}
}
//轮播移动的函数
function imgMove(){
var bl = false;
for(var i=0; i<imgs.length; i++){
imgs[i].style.left = imgs[i].offsetLeft - 1 + 'px';
if(imgs[i].offsetLeft == 0){
bl = true;
if(i==0)
imgs[imgs.length-1].style.left='576px';
else imgs[i-1].style.left = '576px'; } } if(!bl) setTimeout(imgMove, 20); else setTimeout(imgMove, 3000);
} //开始调用轮播 setTimeout(imgMove, 3000);</script></body></html>
JavaScript 图片轮播入门的更多相关文章
- Javascript图片轮播
原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...
- JavaScript图片轮播，举一反三
图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 <!doctype html> <html lang="en"> < ...
- JavaScript图片轮播器
先贴上html的代码 <div class="ImgDiv"> <div class="Imgs" id="imgScroll&qu ...
- 图片轮播jQuery
<script type="text/javascript"> //图片轮播 var bannerIndex = 0; ba ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- 原生Js_使用setInterval() 方法实现图片轮播功能
用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- JavaScript对象(document对象 图片轮播)
图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
随机推荐
- HTML URL
HTML 统一资源定位器(Uniform Resource Locators) URL 是一个网页地址. URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址 ...
- android studio导入矢量svg图标技巧
1.在android studio中打开File-->Settings-->Plugins,在Plugins中输入SVG2VectorDrawable搜索插件,并安装. 2.安装完成重启a ...
- Ubuntu14.04 安装Oracle JDK
在Ubuntu 14.04 中安装 Oracle JDK6,7 或 8. 准备:添加add-apt-repository工具 #apt-get install python-software-prop ...
- python中关于__init__模块文件的理解
一般来说新建的一个包下,必然会有一个__init__文件?那么这个文件到底邮有和作用呢? 总结几点如下: 1.__init__文件在包下,其中定义了包的属性,方法;必须要有这个文件,如果没有的话,这个 ...
- 如何：使用 Visual Basic 编写基于 Unity3D 的计算器
随着 .NET 全平台战略的推进,微软正在让以 C# 为先锋的 .NET 拥有跨平台特性.这个过程中一直有人想知道其它 .NET 语言对跨平台的支持有什么改进,熟悉 C# 但是喜欢用 VB 的我也不例 ...
- ADXL345经验总结，采用SPI和I2C总线操作
一. ADXL345简介 ADXL345是ADI公司推出的三轴(x,y,z)iMEMS数字加速度计(digital accelerometer),具有在16G下高分辨率(13Bit)测量能 ...
- Graphql入门
Graphql入门 GraphQL是一个查询语言,由Facebook开发,用于替换RESTful API.服务端可以用任何的语言实现.具体的你可以查看Facebook关于GraphQL的文档和各种语言 ...
- 编写JQuery插件-2
继续上一节的代码 (function(){ /* code */ })() 来我们介绍一下吧,首先定义一个匿名函数 fnction(){/* 这里放置代码 */} 然后用括号括起来, (fnction ...
- 深入理解DOM事件类型系列第六篇——加载事件
前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...
- shell编程其实真的很简单（四）
上篇我们学习了shell中条件选择语句的用法.接下来本篇就来学习循环语句.在shell中,循环是通过for, while, until命令来实现的.下面就分别来看看吧. for for循环有两种形式: ...