编程 Javascript

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图片轮播

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

js实现自动图片轮播代码

- Author -

程序猿？

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

html数组字符串拼接的最快方法

Sep 16 Javascript

IE event.srcElement和FF event.target 功能比较

Mar 01 Javascript

分享一则JavaScript滚动条插件源码

Mar 03 Javascript

bootstrap网页框架的使用方法

May 10 Javascript

EasyUI Combobox设置默认值获取text的方法

Nov 28 Javascript

Bootstrap基本插件学习笔记之按钮(21)

Dec 08 Javascript

详解vue.js+UEditor集成 [前后端分离项目]

Jul 07 Javascript

swiper自定义分页器使用方法详解

Sep 14 Javascript

angularjs select 赋值 ng-options配置方法

Feb 28 Javascript

详解ES6中的 Set Map 数据结构学习总结

Nov 06 Javascript

详解vue后台系统登录态管理

Apr 02 Javascript

在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

Sep 11 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