js 图片轮播（5张图片）

演示地址：http://img.jb51.net/online/picPlayer/picplay.htm
复制代码代码如下:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>pic player</title>
        <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script>
        <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script>
    </head>
    <style type="text/css">
    img{border:0;}
    </style>
    <body>
        <div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;">
            there is a pic-player
        </div>
        <script>
            var p = $（"#picplayer"）;
            var pics1 = [{url:"http://img.jb51.net/online/picPlayer/1.jpg",link:"http://www.jb51.net/#",time:5000},{url:"http://img.jb51.net/online/picPlayer/2.jpg",link:"http://www.jb51.net/#",time:4000},{url:"http://img.jb51.net/online/picPlayer/3.jpg",link:"http://www.jb51.net",time:6000},{url:"http://img.jb51.net/online/picPlayer/2.jpg",link:"http://www.jb51.net",time:6000},{url:"http://img.jb51.net/online/picPlayer/1.jpg",link:"http://www.jb51.net",time:6000}];
            initPicPlayer（pics1,p.css（"width"）.split（"px"）[0],p.css（"height"）.split（"px"）[0]）;
            //
            //
            function initPicPlayer（pics,w,h）
            {
                //选中的图片
                var selectedItem;
                //选中的按钮
                var selectedBtn;
                //自动播放的id
                var playID;
                //选中图片的索引
                var selectedIndex;
                //容器
                var p = $（"#picplayer"）;
                p.text（""）;
                p.append（"<div id="piccontent"></div>"）;
                var c = $（"#piccontent"）;
                for（var i=0;i<pics.length;i++）
                {
                    //添加图片到容器中
                    c.append（"<a href=""+pics[i].link+"" target="_blank"><img id="picitem"+i+"" style="display: none;z-index:"+i+"" src=""+pics[i].url+"" /></a>"）;
                }
                //按钮容器，绝对定位在右下角
                p.append（"<div id="picbtnHolder" style="position:absolute;top:"+（h-25）+"px;width:"+w+"px;height:20px;z-index:10000;"></div>"）;
                //
                var btnHolder = $（"#picbtnHolder"）;
                btnHolder.append（"<div id="picbtns" style="float:right; padding-right:1px;"></div>"）;
                var btns = $（"#picbtns"）;
                //
                for（var i=0;i<pics.length;i++）
                {
                    //增加图片对应的按钮
                    btns.append（"<span id="picbtn"+i+"" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> "+（i+1）+" </span> "）;
                    $（"#picbtn"+i）.data（"index",i）;
                    $（"#picbtn"+i）.click（
                        function（event）
                        {
                            if（selectedItem.attr（"src"） == $（"#picitem"+$（this）.data（"index"））.attr（"src"））
                            {
                                return;
                            }
                            setSelectedItem（$（this）.data（"index"））;
                        }
                    ）;
                }
                btns.append（" "）;
                ///
                setSelectedItem（0）;
                //显示指定的图片index
                function setSelectedItem（index）
                {
                    selectedIndex = index;
                    clearInterval（playID）;
                    //alert（index）;
                    if（selectedItem）selectedItem.fadeOut（"fast"）;
                    selectedItem = $（"#picitem"+index）;
                    selectedItem.fadeIn（"slow"）;
                    //
                    if（selectedBtn）
                    {
                        selectedBtn.css（"backgroundColor","#eee"）;
                        selectedBtn.css（"color","#000"）;
                    }
                    selectedBtn = $（"#picbtn"+index）;
                    selectedBtn.css（"backgroundColor","#000"）;
                    selectedBtn.css（"color","#fff"）;
                    //自动播放
                    playID = setInterval（function（）
                    {
                        var index = selectedIndex+1;
                        if（index > pics.length-1）index=0;
                        setSelectedItem（index）;
                    },pics[index].time）;
                }
            }



        </script>


    </body>
</html>

如果想增加图片可以通过增加 var pics1 后面的内容。即可。