用js实现的最简单的图片轮播

用js实现的最简单的图片轮播,主要的方法是改变img的src参数,达到改变显示的图片。

<script language =javascript >
    var curIndex = 0;
    var timeInterval = 5000; //时间间隔,单位毫秒
    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";

    function changeImg()//改变图片函数
    {
        var obj = document.getElementById("showpic");//获得img的id
        if (curIndex == arr.length - 1)//判断是否超出数组了
        {
            curIndex = 0;
        }
        else
        {
            curIndex += 1;//数组key加1
        }
        obj.src = "image/" + arr[curIndex];//改变img的src参数达到改变图片
    }
    setInterval(changeImg, timeInterval); //循环,5000毫秒转换一次图片
</script> 
<img src="image/1.jpg" alt="用js实现的最简单的图片轮播" width="427" height="219" id="showpic" /> 

这个是很简单的一个js轮播图的代码,可以给刚开始学习js的朋友作为参考,也可以在这个基础上开发更多的轮播图动态效果。

如有更好的意见或建议,请留言。

网友评论3

  1. 地板
    mayor:

    来看看 嘿嘿

    2015-12-02 14:28 [回复]
  2. 多谢,很实用,很久没有做wordpress了,学习了

    2015-12-10 23:40 [回复]
  3. 沙发
    盖土网:

    好文章,内容无懈可击.禁止此消息:nolinkok@163.com

    2016-11-15 11:21 [回复]

发表评论

表情
还能输入210个字