js实现自动图片轮播代码


Posted in Javascript onMarch 22, 2017

本文实例为大家分享了轮播的具体代码,自动轮播,居中显示,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  #div1{
   width: 192px;
   height: 120px;
   border: 1px solid gray;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
  }
  #div1 img{
   position: absolute;
  }
 </style>
</head>
<body>
<div id="div1">
 <img src="images/1.jpg" alt="" width="192"/>
 <img src="images/2.jpg" alt="" width="192"/>
 <img src="images/3.jpg" alt="" width="192"/>
 <img src="images/4.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=function(){
  for(var i=0; i<imgs.length; i++){
   imgs[i].style.left = i*192 +'px'
  }
 };
 //轮播移动的函数
 function imgMove(){
  var b1 = false;
  for(var i = 0; i < imgs.length; i++) {
   imgs[i].style.left = imgs[i].offsetLeft-1 + 'px';
   if(imgs[i].offsetLeft==0){
    b1=true;
    if(i==0)
    imgs[imgs.length-1].style='576px';
    else
    imgs[i-1].style.left='576px'
   }
  }
  if(!b1)
   setTimeout(imgMove,20);
  else
   setTimeout(imgMove,2000);
 }
 setTimeout(imgMove,3000);
</script>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
JavaScript中清空数组的三种方式
Mar 22 #Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 #Javascript
tab栏切换原理
Mar 22 #Javascript
js中的DOM模拟购物车功能
Mar 22 #Javascript
js+canvas实现动态吃豆人效果
Mar 22 #Javascript
JavaScript实现星星等级评价功能
Mar 22 #Javascript
discuz表情的JS提取方法分析
Mar 22 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
javascript数组快速打乱重排的方法
2014/01/02 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python科学计算之Pandas详解
2017/01/15 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python url 参数修改方法
2018/12/26 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
印尼购物网站:iLOTTE
2019/10/16 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
学生安全责任书
2014/04/15 职场文书
如何写早恋检讨书
2014/09/10 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
三八节活动主持词
2015/07/04 职场文书
利用python做表格数据处理
2021/04/13 Python
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技