javascript实现简单的轮播图片

方法一:

 <script>
var curIndex=0;//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下。
var timeInterval=1000;
var arr=new Array();
arr[0]="images/1.jpg";
arr[1]="images/2.jpg";
arr[2]="images/3.jpg";
arr[3]="images/4.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>
<center>
<img id=obj src =arr[curIndex]  border =0>
   </center>

方法二:

 </div>
      <div style="float:left;width: 60%; height: 1500px;  ">      
              <ul id="img"style="width : 100%; height : 500px;">
                  <li><img src="images/1.jpg"></li>
                  <li><img src="images/2.jpg"></li>
                  <li><img src="images/3.jpg"></li>
                  <li><img src="images/4.jpg"></li>
              </ul> 
          
         </div>   
         <script type="text/javascript">
         (function () {
            var i = 0;
            var $ = function (ID) { return document.getElementById(ID); };
            var timer = null, speed = 1000;
            $("img").getElementsByTagName("li")[0].style.display = "block";
            (function () {
                if (i >= $("img").getElementsByTagName("li").length) {
                    for (var j = 0; j < $("img").getElementsByTagName("li").length; j++) {
                        $("img").getElementsByTagName("li")[j].style.display = "none";
                    }
                    i = 1;
                    $("img").getElementsByTagName("li")[0].style.display = "block";
                } else {
                    for (var j = 0; j < $("img").getElementsByTagName("li").length; j++) {
                        //console.log(j+""+i);
                        if (j === i) {
                            $("img").getElementsByTagName("li")[j].style.display = "block";
                        } else {
                            $("img").getElementsByTagName("li")[j].style.display = "none";
                        }
                    }
                    i++;
                }
                timer = setTimeout(arguments.callee, speed);
            })();
        })();
    </script>      

  

posted @ 2016-03-29 14:23  非非是  阅读(283)  评论(0编辑  收藏  举报