JS实现简易图片轮播效果的方法

本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下：

这里使用JS制作简易图片轮播效果：

制作比较粗糙，使用的图片是width：660ppx,height：550px;

效果图如下：

代码部分如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>JS幻灯代码</title>
 <script type="text/javascript">
  window.onload = function () {
   flag = 0;
   obj1 = document.getElementById("slider");
   obj2 = document.getElementsByTagName("li");
   obj2[0].style.backgroundColor = "#666666";
   //默认被选中颜色
   time = setInterval("turn();", 5000);
   obj1.onmouseover = function () {
    clearInterval(time);
   }
   obj1.onmouseout = function () {
    time = setInterval("turn();", 6000);
   } 

   for (var num = 0; num < obj2.length; num++) {
    obj2[num].onmouseover = function () {
     turn(this.innerHTML);
     clearInterval(time);
    }
    obj2[num].onmouseout = function () {
     time = setInterval("turn();", 6000);
    }
   }
   //延迟加载图片，演示的时候，使用本地图片
   //上线后请改为二级域名提供的图片地址
   document.getElementById("second").src = "images/2.png";
   //使用图片宽660，高550
   document.getElementById("third").src = "images/3.png";
   document.getElementById("four").src = "images/4.png";
  }
  function turn(value) {
   if (value != null) {
    flag = value - 2;
   }
   if (flag < obj2.length - 1)
    flag++;
   else
    flag = 0;
   obj1.style.top = flag * (-550) + "px";
   for (var j = 0; j < obj2.length; j++) {
    obj2[j].style.backgroundColor = "#ffffff";
   }
   obj2[flag].style.backgroundColor = "#666666";
  }
 </script>
 <style type="text/css">
  #wrap
  {
   height: 550px;
   width: 660px;
   overflow: hidden;
   position: relative;
   overflow: hidden;
  }
  #wrap ul
  {
   list-style: none;
   position: absolute;
   top: 500px;
   left: 450px;
  }
  #wrap li
  {
   margin-left:2px;
   opacity: .3;
   filter: alpha(opacity=30);
   text-align: center;
   line-height: 30px;
   font-size: 20px;
   height: 30px;
   width: 30px;
   background-color: #fff;
   float: left;
   border-radius:3px;
   cursor:pointer;
  }
  #slider
  {
   position: absolute;
   top: 0px;
   left: 0px;
  }
  #slider img
  {
   float: left;
   border: none;
  }
 </style>
</head>
<body>
 <div id="wrap">
  <div id="slider">
   <a target="_blank" href="#"><img src="images/1.png" /></a>
   <a target="_blank" href="#"><img id="second" /></a>
   <a target="_blank" href="#"><img id="third" /></a>
   <a target="_blank" href="#"><img id="four" /></a>
  </div>
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
  </ul>
 </div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。