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将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
收集前端面试题之url、href、src
Mar 22 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
JavaScript如何操作css
Oct 24 Javascript
如何使用CocosCreator对象池
Apr 14 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
JS实现在线ps功能详解
2019/07/31 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Python类的继承和多态代码详解
2017/12/27 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Django模板Templates使用方法详解
2019/07/19 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
小学家长会邀请函
2014/01/23 职场文书
补充协议书
2015/01/28 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
HAM-2000摩机图
2021/04/22 无线电
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python