轮播要求：
一个在页面居中的矩形框，图片依次从矩形框中经过 当图片完整占满矩形框时 停留一小段时间再向左边移动
经过矩形框的图片自动跑到右边最后一个图的后面。
核心原理：
在一个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. HTML模块化：使用HTML5 Boilerplate模板

    HTML5 Boilerplate 是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Modernizr 作者.yayQuery 播客主持人)主导的“前端开 ...

  2. C# 程序只能执行一次

    应用程序的主入口点. //每一个程序只能运行一个实例 bool isRun = false; System.Threading.Mutex m = new System.Threading.Mutex ...

  3. JavaScript中this的指向问题

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...

  4. ASP.NET\MVC 解决C#上传图片质量下降，图片模糊，水印有杂点的问题

    对图片处理这一块不是很懂,自己写不出来,这些年一直没有停止找一个上传图片质量不下降,加水印不会导致模糊和水印周边产生杂点的代码. 网上基本上99.9%的代码处理图片质量都是下面这两句: //设置质量 ...

  5. 关于WIN10开机无法输入密码的问题

    昨日,电脑 遇到了开机无法输入密码的问题,神烦. 作为一个计算狗,怎么能直接装系统(百度了一堆方法,装系统,果真万能)呢. 所以,深刻的分析了下. 1 .首先说明基本情况. 计算机品牌:ASUS 系统 ...

  6. react+redux构建淘票票首页

    react+redux构建淘票票首页 描述 在之前的项目中都是单纯的用react,并没有结合redux.对于中小项目仅仅使用react是可以的:但当项目变得更加复杂,仅仅使用react是远远不够的,我 ...

  7. php下安装动态扩展库的相关事项

    php下安装动态扩展库的相关事项 我下载的Apache版本为2.4,PHP版本为7.0. 将Apache与PHP集成配置好后(PHP安装目录为:G:\computer\web\php7,apache安 ...

  8. cmake工具链

    命令project() enable_language()try_compile() 变量CMAKE_<LANG>_COMPILERCMAKE_<LANG>_COMPILER_ ...

  9. 微端游戏启动器LAUNCHER的制作之MFC版一（序和进程通信）

    额...刚开始信誓旦旦说要写launcher制作的博客,还没写完就被抛到脑后了真是没毅力.最近把之前写的wpf的launcher改成了mfc版,遇到很多问题,写了三个星期才写完,好好记录一下吧.我也想 ...

  10. ESLint 规则详解（一）

    前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查.这个工具包含了 200 多条 Javascript ...