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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
bootstrap表单示例代码分享
May 18 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
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调用Webservice实例代码
2011/07/29 PHP
php实现加减法验证码代码
2014/02/14 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python实现360的字符显示界面
2014/02/21 Python
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python文件排序的方法总结
2020/09/13 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
会计工作决心书
2014/03/11 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
体育专业自荐书
2014/05/29 职场文书
财务会计专业自荐书
2014/06/30 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
法务专员岗位职责
2015/02/14 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
三国演义读书笔记
2015/06/25 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python