轮播要求:
一个在页面居中的矩形框,图片依次从矩形框中经过 当图片完整占满矩形框时 停留一小段时间再向左边移动
经过矩形框的图片自动跑到右边最后一个图的后面。
核心原理:
在一个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 图片轮播入门的更多相关文章

  1. Javascript图片轮播

    原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...

  2. JavaScript图片轮播,举一反三

    图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 <!doctype html> <html lang="en"> < ...

  3. JavaScript图片轮播器

    先贴上html的代码 <div class="ImgDiv"> <div class="Imgs" id="imgScroll&qu ...

  4. 图片轮播jQuery

          <script type="text/javascript">         //图片轮播         var bannerIndex = 0; ba ...

  5. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  6. 原生Js_使用setInterval() 方法实现图片轮播功能

    用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  8. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  9. JavaScript对象(document对象 图片轮播)

    图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

随机推荐

  1. PHP操作MySQL数据库5个步骤

    PHP操作MySQL数据库一般可分为5个步骤:1.连接MySQL数据库服务器:2.选择数据库:3.执行SQL语句:4.关闭结果集:5断开与MySQL数据库服务器连接. 1.用mysql_connect ...

  2. 关于codeMirror插件使用的一个坑

    codeMirror插件可以做语法高亮渲染,但它操作过程是这样的:先从 textarea中读取值放到codemirror动态生成的div中,根据textarea中的换行个数确定行数,根据正则表达来高亮 ...

  3. 比较两个目录中的文件 diff -rq

    [root@bass test]# mkdir A B [root@bass test]# tree A A └── lin 0 directories, 1 file [root@bass test ...

  4. UIView的user Interaction Enabled属性

    A Boolean value that determines whether user events are ignored and removed from the event queue. 译: ...

  5. Android软键盘强制弹出,隐藏输入法.

    本文实例讲述了Android实现弹出键盘代码,是一个非常实用的功能.代码非常简洁.分享给大家供大家参考. 具体功能代码如下: ? 1 2 3 4 5 6 7 8 Timer timer = new T ...

  6. [转]动态管理视图和函数 (Transact-SQL)

    动态管理视图和函数返回可用于监视服务器实例的运行状况.诊断故障以及优化性能的服务器状态信息. 重要提示 动态管理视图和函数返回特定于实现的内部状态数据. 在未来的 SQL Server 版本中,它们的 ...

  7. MYSQL GROUP BY Optimization

    GROUP BY Optimization 常规的匹配group by(分组)操作子句是扫整表并且创建包含连续的分组行的临时表, 利用临时表得到group数据,运用appregate function ...

  8. BZOJ 2594: [Wc2006]水管局长数据加强版 [LCT kruskal]

    2594: [Wc2006]水管局长数据加强版 Time Limit: 25 Sec  Memory Limit: 128 MBSubmit: 2917  Solved: 918[Submit][St ...

  9. for循环与forEach性能思考

    今日看到一句话: 基于循环的迭代比基于函数的迭代法快8倍,因此有了该篇验证博客. 验证代码如图: 验证结果:在数量比较少的时候,无明显差别,当数量级达到10的4次方时候,for循环的效率优势明显:如图 ...

  10. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...