js图片自动轮播代码分享(js图片轮播)


Posted in Javascript onMay 06, 2014

1、利用图片width显示位置来播放图片,技术:.offsetWidth 、aBtn[i].index = i 、setInterval() 、oUl[0].style.left =  、onclick()
2、利用数组放入图片经行轮播,技术:setInterval()。没有onclick()

图片轮播12js.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>images slide</title>
 <style type="text/css">
  * {
   margin: 0px;
   padding: 0px;
  }
  li {
   list-style: none;
  }
  img {
   border: 0;
  }
  a {
   text-decoration: none;
  }
  #slide {
   width: 800px;
   height: 400px;
   box-shadow: 0px 0px 5px #c1c1c1;
   margin: 20px auto;
   position: relative;
   overflow: hidden;
  }
  #slide ul {
   position: absolute;
   left: 0px;
   top: 0px;
   height: 400px;
   width: 11930px;
  }
  #slide ul li {
   width: 800px;
   height: 400px;
   overflow: hidden;
   float: left;
  }
  #slide .ico {
   width: 800px;
   height: 20px;
   overflow: hidden;
   text-align: center;
   position: absolute;
   left: 0px;
   bottom: 10px;
   z-index: 1;
  }
  #slide .ico a {
   display: inline-block;
   width: 10px;
   height:10px;
   background: url(out.png) no-repeat 0px 0px;
   margin: 0px 5px;
  }
  #slide .ico .active {
   background: url(out1.png) no-repeat 0px 0px;
  }
  #btnLeft {
   width: 60px;
   height: 400px;
   left: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnLeft :hover {
   background: url() no-repeat 0px 0px;
  }
  #btnRight {
   width: 60px;
   height: 400px;
   right: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnRight :hover {
   background: url() no-repeat 0px 0px;
  }   </style>
 <script type="text/javascript">
  window.onload = function() {
   var oIco = document.getElementById("ico");
   var aBtn = oIco.getElementsByTagName("a");
   var oSlide = document.getElementById("slide");
   var oUl = oSlide.getElementsByTagName("ul");
   var aLi = oUl[0].getElementsByTagName("li");
   var oBtnLeft = document.getElementById("btnLeft");
   var oBtnRight = document.getElementById("btnRight");
   var baseWidth = aLi[0].offsetWidth;
   //alert(baseWidth);
   oUl[0].style.width = baseWidth * aLi.length + "px";
   var iNow = 0;
   for(var i=0;i<aBtn.length;i++) { 
    aBtn[i].index = i;
    aBtn[i].onclick = function() {
     //alert(this.index);
     //alert(oUl[0].style.left);
     move(this.index);
     //aIco[this.index].className = "active";
    }
   }
   oBtnLeft.onclick = function() {
    iNow ++;
    //document.title = iNow;
    move(iNow);
   }
   oBtnRight.onclick = function() {
    iNow --;
    document.title = iNow;
    move(iNow);
   }
   var curIndex = 0;
   var timeInterval = 1000;
   setInterval(change,timeInterval);
   function change() {
    if(curIndex == aBtn.length) {
     curIndex =0;   
    } else {
     move(curIndex);
     curIndex += 1;
    }

   }
   function move(index) {
    //document.title = index;
    if(index>aLi.length-1) {
     index = 0;
     iNow = index;
    }
    if(index<0) {
     index = aLi.length - 1;
     iNow = index;
    }
    for(var n=0;n<aBtn.length;n++) {
     aBtn[n].className = ""; 
    }
    aBtn[index].className = "active";
    oUl[0].style.left = -index * baseWidth + "px";
    //buffer(oUl[0],{
    // left: -index * baseWidth
    // },8)
   }
  }
  </script>
  </head>
<body>
 <div id="slide">
  <a id="btnLeft" href="javascript:void(0);" ></a>
  <a id="btnRight" href="javascript:void(0);" ></a>
  <!--when change next image:style="left: -(n-1)*800px;"-->
  <ul>
   <li><img src="1.jpg" alt="" /></li>
   <li><img src="2.jpg" alt="" /></li>
   <li><img src="3.jpg" alt="" /></li>
   <li><img src="4.jpg" alt="" /></li>
   <li><img src="5.jpg" alt="" /></li>
   <li><img src="6.jpg" alt="" /></li>
  </ul>
  <div id="ico" class="ico"> 
   <a class="active" href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
  </div>
 </div>
</body>
</html>

图片自动播放.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>images</title> 
 <script type="text/javascript"> 
  var curIndex = 0; 
  var timeInterval = 1000; 
  var arr = new Array(); 
  arr[0] = "1.jpg"; 
  arr[1] = "2.jpg"; 
  arr[2] = "3.jpg"; 
  arr[3] = "4.jpg"; 
  arr[4] = "5.jpg"; 
  arr[5] = "6.jpg"; 
  arr[6] = "7.jpg"; 
  setInterval(changeImg,timeInterval); 
  function changeImg() { 
   var obj = document.getElementById("obj"); 
   if (curIndex == arr.length-1) { 
    curIndex = 0; 
   } else { 
    curIndex += 1; 
     } 
   obj.src = arr[curIndex]; 
  } 
 </script>  <!-- <script language="javascript"> 
  setInterval(test,1000); 
  var array = new Array(); 
  var index = 0; 
  var array = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg"); 
  function test() { 
   var myimg=document.getElementById("imgs"); 
   if(index==array.length-1) 
   { index=0; }else{ index++; } 
   myimg.src=array[index]; 
  } 
 </script> -->
 </head> 
 <body> 
  <img id = "obj" src = "1.jpg" border = 0 /> 
 </body> 
</html>
Javascript 相关文章推荐
JavaScript中的操作符==与===介绍
Dec 31 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
javascript的BOM
May 03 Javascript
JS中判断null的方法分析
Nov 21 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
简单的js图片轮换代码(js图片轮播)
May 06 #Javascript
jQuery is()函数用法3例
May 06 #Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 #Javascript
一些老手都不一定知道的JavaScript技巧
May 06 #Javascript
jQuery中的$.ajax()方法应用
May 06 #Javascript
jquery判断元素是否隐藏的多种方法
May 06 #Javascript
JQuery调用WebServices的方法和4个实例
May 06 #Javascript
You might like
PHP游戏编程25个脚本代码
2011/02/08 PHP
yii的CURD操作实例详解
2014/12/04 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
PHP PDO操作总结
2014/11/17 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python类中super()和__init__()的区别
2016/10/18 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
py-charm延长试用期限实例
2019/12/22 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
利用Python优雅的登录校园网
2020/10/21 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
酒店司机岗位职责
2013/12/14 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
MySQL 聚合函数排序
2021/07/16 MySQL
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
Nginx的gzip相关介绍
2022/05/11 Servers