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 相关文章推荐
JS 统计时间
Mar 09 Javascript
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
简单的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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php header Content-Type类型小结
2011/07/03 PHP
php绘制圆形的方法
2015/01/24 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python实现多进程的四种方式
2019/02/22 Python
Django中create和save方法的不同
2019/08/13 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
加工操作管理制度
2014/01/19 职场文书
追悼会子女答谢词
2014/01/28 职场文书
家长给小学生的评语
2014/01/30 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
公司委托书范本
2014/04/04 职场文书
通知的写法
2015/04/23 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
党员公开承诺书2016
2016/03/24 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL