用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" width="427" height="219" id="showpic" /> 

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

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

未经允许不得转载:YiEcho博客 » 用js实现的最简单的图片轮播

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏