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 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
vue修改vue项目运行端口号的方法
Aug 04 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Vuex入门到上手教程
2018/06/20 Javascript
vue实现微信分享功能
2018/11/28 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python中bisect模块用法实例
2014/09/25 Python
python交互式图形编程实例(三)
2017/11/17 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
学校岗位设置方案
2014/01/16 职场文书
节约能源标语
2014/06/17 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
安全教育观后感
2015/06/17 职场文书
服装店员工管理制度
2015/08/07 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python