基于javascript数组实现图片轮播_javascript技巧-js教程-PHP中文网

基于javascript数组实现图片轮播_javascript技巧

php中文网

发布： 2016-05-16 15:02:38

原创

2167人浏览过

图片轮播的办法有多种，在这里介绍一种简单的：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>

登录后复制

完整实例如下

phpscup轻量级cms系统1.1 beta GBK

PHPSCUP是一套追求简洁易用很务实的系统！PHPSCUP能满足大多数的初级企业网站用户。系统内置企业简介模块、新闻模块、产品模块、人才模块、在线留言模块、单篇文章模块、友情链接模块、单篇文章模块、图片轮播模块、下载模块。遵循SEO标准，通过模板或者定制为企业提供专业的营销型网站,该系统采用PHP+MySQL组合开发，具备安全、高效、稳定等基本特性。主要功能特色体现在：权限分配：权限分配功能非常

查看详情

<!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>
   @@##@@ 
 </div>
</body> 
</html>

登录后复制

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