轮播要求:
一个在页面居中的矩形框,图片依次从矩形框中经过 当图片完整占满矩形框时 停留一小段时间再向左边移动
经过矩形框的图片自动跑到右边最后一个图的后面。

核心原理:
在一个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. Redis_高可用方案Sentinel配置

    最小化的sentinel配置文件为: 1 port 7031 2 3 dir /opt/app/redis/redis-2.8.17/tmp 4 5 sentinel monitor mymaster ...

  2. Python—元组tuple

    列表的知识其实就类似于c语言中的数组,可插入.修改.list=[a,b,c,d] 而元组tuple,一旦初始化即不可修改.好处与绝对安全. 定义一个空的元组:t=() 定义只有一个元素的元组:t=(1 ...

  3. Linux高级编程--04.GDB调试程序(设置断点)

    调试已运行的程序 在UNIX下用ps查看正在运行的程序的PID(进程ID),然后用gdb PID格式挂接正在运行的程序. 先用gdb 关联上源代码,并进行gdb,在gdb中用attach命令来挂接进程 ...

  4. CentOS安装thrift

    下载thrift依赖的东西  yum -y install automake libtool flex bison pkgconfig gcc-c++ boost-devel libevent-dev ...

  5. (原)SQL Server 系统提供功能的三个疑惑

    本文目录列表: 1.SQL Server系统提供的部分疑惑概述2.系统函数调用时DEFAULT代替可选参数使用不统一3.队列字段列message_enqueue_time记录的是UTC日期时间 4.@ ...

  6. POI实现大数据EXCLE导入导出,解决内存溢出问题

    使用POI能够导出大数据保证内存不溢出的一个重要原因是SXSSFWorkbook生成的EXCEL为2007版本,修改EXCEL2007文件后缀为ZIP打开可以看到,每一个Sheet都是一个xml文件, ...

  7. 微信获取ticket及生成二维码(临时或永久)

    微信获取ticket及生成二维码(临时或永久) curl.php---- define("APPID",""); define("APPSECRET& ...

  8. Docker安装(一)

    环境:CentOS release 6.9 (Final)   1.检查环境是否支持安装docker 1)系统内核是否是3.8或更高版本 uname -a (这个安装不了,内核版本不够) Linux ...

  9. 使用jaxb根据xsd逆向生成java代码

    1.配置java环境变量,将java安装目录下bin文件夹下的xjc.exe配到classpath下 (一般有java环境变量就不用配置了) 2.进入xsd的文件夹下,cmd下执行 xjc -p 包路 ...

  10. Android之设备唯一识别

    唯一Android的设备ID String androidId = Settings.Secure.getString(getContentResolver(),Settings.Secure.AND ...