收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

基于javascript数组实现图片轮播

图片轮播的办法有多种,在这里介绍一种简单的:js数组实现。

首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播图片

 <script type="text/javascript"> 
 var curIndex = 0; 
 var timeInterval = 1000; 
 var arr = new Array(); 
 arr[0] = "1.png"; 
 arr[1] = "2.png"; 
 arr[2] = "3.png"; 
 arr[3] = "4.png"; 
 arr[4] = "5.png"; 
 setInterval(changeImg,timeInterval); 
 function changeImg() { 
  var obj = document.getElementById("imge"); 
  if (curIndex == arr.length-1) { 
   curIndex = 0; 
  } else { 
   curIndex += 1; 
  } 
  obj.src = arr[curIndex]; 
 } 
 </script>

完整实例如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>使用数组实现图片自动轮播</title> 
 <style type="text/css">
 #main{
  width: 700px;
  height: 450px;
  margin: 0 auto;
  text-align: center;
 }
 </style>
 <script type="text/javascript"> 
 var curIndex = 0; 
 var timeInterval = 1000; 
 var arr = new Array(); 
 arr[0] = "1.png"; 
 arr[1] = "2.png"; 
 arr[2] = "3.png"; 
 arr[3] = "4.png"; 
 arr[4] = "5.png"; 
 setInterval(changeImg,timeInterval); 
 function changeImg() { 
  var obj = document.getElementById("imge"); 
  if (curIndex == arr.length-1) { 
   curIndex = 0; 
  } else { 
   curIndex += 1; 
  } 
  obj.src = arr[curIndex]; 
 } 
 </script> 
</head> 
<body> 
 <div id="main">
  <h1>使用数组实现图片自动轮播</h1>
  <img id = "imge" src = "1.png" alt="picture" /> 
 </div>
</body> 
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助。

Immutable 在 JavaScript 中的应用
Mutable对象在JavaScript中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内

搞定immutable.js详细说明
什么是ImmutableDataImmutableData是指一旦被创造后,就不可以被改变的数据。通过使用ImmutableData,可以让我们更容易的去处理缓存、回退、数据变化检测等

JS基于clipBoard.js插件实现剪切、复制、粘贴
摘要:最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的!
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号