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结合css实现网页换肤功能
Nov 02 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
php简单实现数组分页的方法
2016/04/30 PHP
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python sort、sorted高级排序技巧
2014/11/21 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
简单实现python数独游戏
2018/03/30 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python字符串查找函数的用法详解
2019/07/08 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
爱国卫生月实施方案
2014/02/21 职场文书
教师自我鉴定范文
2014/03/20 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Python中使用ipython的详细教程
2021/06/22 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js