用JS做图片轮播

时间：2021-10-14 21:19:32
脚本之家

首页应用手游攻略教程

﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效

js 图片轮播(5张图片)

作者：mdxy-dxy

网上比较常见的用jquery实现的图片轮播效果代码。

演示地址：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:;}

    </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:},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:}];

            initPicPlayer(pics1,p.css('width').split('px')[],p.css('height').split('px')[]);

            //

            //

            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=;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-)+'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=;i<pics.length;i++)

                {

                    //增加图片对应的按钮

                    btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;">&nbsp;'+(i+)+'&nbsp;</span>&nbsp;');

                    $('#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('&nbsp;');

                ///

                setSelectedItem();

                //显示指定的图片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+;

                        if(index > pics.length-)index=;

                        setSelectedItem(index);

                    },pics[index].time);

                }

            } 

        </script> 

    </body>

</html>

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

相关文章