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 EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP HTML代码串 截取实现代码
2009/06/29 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python装饰器decorator介绍
2014/11/21 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Pandas分组与排序的实现
2019/07/23 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
深入浅析Python代码规范性检测
2020/07/31 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
社区包粽子活动方案
2014/01/21 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
倡议书的写法
2014/08/30 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers