js 사진 윤 방(5 장 사진)

6119 단어 js사진 윤파
프레젠테이션 주소: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:'https://www.jb51.net/#',time:5000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'https://www.jb51.net/#',time:4000},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'https://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'https://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'https://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;">&nbsp;'+(i+1)+'&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(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 pics 1 뒤의 내용 을 추가 할 수 있 습 니 다.됐다.

좋은 웹페이지 즐겨찾기