js carrousel d'images (5 images)-js tutoriel-php.cn

js carrousel d'images (5 images)
高洛峰
Libérer： 2017-01-12 10:43:37
original
1739 Les gens l'ont consulté
<!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 = $(&#39;#picplayer&#39;); 
            var pics1 = [{url:&#39;http://img.jb51.net/online/picPlayer/1.jpg&#39;,link:&#39;http://www.jb51.net/#&#39;,time:5000},{url:&#39;http://img.jb51.net/online/picPlayer/2.jpg&#39;,link:&#39;http://www.jb51.net/#&#39;,time:4000},{url:&#39;http://img.jb51.net/online/picPlayer/3.jpg&#39;,link:&#39;http://www.jb51.net&#39;,time:6000},{url:&#39;http://img.jb51.net/online/picPlayer/2.jpg&#39;,link:&#39;http://www.jb51.net&#39;,time:6000},{url:&#39;http://img.jb51.net/online/picPlayer/1.jpg&#39;,link:&#39;http://www.jb51.net&#39;,time:6000}]; 
            initPicPlayer(pics1,p.css(&#39;width&#39;).split(&#39;px&#39;)[0],p.css(&#39;height&#39;).split(&#39;px&#39;)[0]); 
            // 
            // 
            function initPicPlayer(pics,w,h) 
            { 
                //选中的图片 
                var selectedItem; 
                //选中的按钮 
                var selectedBtn; 
                //自动播放的id 
                var playID; 
                //选中图片的索引 
                var selectedIndex; 
                //容器 
                var p = $(&#39;#picplayer&#39;); 
                p.text(&#39;&#39;); 
                p.append(&#39;<div id="piccontent"></div>&#39;); 
                var c = $(&#39;#piccontent&#39;); 
                for(var i=0;i<pics.length;i++) 
                { 
                    //添加图片到容器中 
                    c.append(&#39;<a href="&#39;+pics[i].link+&#39;" target="_blank"><img id="picitem&#39;+i+&#39;" style="display: none;z-index:&#39;+i+&#39;" src="&#39;+pics[i].url+&#39;" /></a>&#39;); 
                } 
                //按钮容器，绝对定位在右下角 
                p.append(&#39;<div id="picbtnHolder" style="position:absolute;top:&#39;+(h-25)+&#39;px;width:&#39;+w+&#39;px;height:20px;z-index:10000;"></div>&#39;); 
                // 
                var btnHolder = $(&#39;#picbtnHolder&#39;); 
                btnHolder.append(&#39;<div id="picbtns" style="float:right; padding-right:1px;"></div>&#39;); 
                var btns = $(&#39;#picbtns&#39;); 
                // 
                for(var i=0;i<pics.length;i++) 
                { 
                    //增加图片对应的按钮 
                    btns.append(&#39;<span id="picbtn&#39;+i+&#39;" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> &#39;+(i+1)+&#39; </span> &#39;); 
                    $(&#39;#picbtn&#39;+i).data(&#39;index&#39;,i); 
                    $(&#39;#picbtn&#39;+i).click( 
                        function(event) 
                        { 
                            if(selectedItem.attr(&#39;src&#39;) == $(&#39;#picitem&#39;+$(this).data(&#39;index&#39;)).attr(&#39;src&#39;)) 
                            { 
                                return; 
                            } 
                            setSelectedItem($(this).data(&#39;index&#39;)); 
                        } 
                    ); 
                } 
                btns.append(&#39; &#39;); 
                /// 
                setSelectedItem(0); 
                //显示指定的图片index 
                function setSelectedItem(index) 
                { 
                    selectedIndex = index; 
                    clearInterval(playID); 
                    //alert(index); 
                    if(selectedItem)selectedItem.fadeOut(&#39;fast&#39;); 
                    selectedItem = $(&#39;#picitem&#39;+index); 
                    selectedItem.fadeIn(&#39;slow&#39;); 
                    // 
                    if(selectedBtn) 
                    { 
                        selectedBtn.css(&#39;backgroundColor&#39;,&#39;#eee&#39;); 
                        selectedBtn.css(&#39;color&#39;,&#39;#000&#39;); 
                    } 
                    selectedBtn = $(&#39;#picbtn&#39;+index); 
                    selectedBtn.css(&#39;backgroundColor&#39;,&#39;#000&#39;); 
                    selectedBtn.css(&#39;color&#39;,&#39;#fff&#39;); 
                    //自动播放 
                    playID = setInterval(function() 
                    { 
                        var index = selectedIndex+1; 
                        if(index > pics.length-1)index=0; 
                        setSelectedItem(index); 
                    },pics[index].time); 
                } 
            } 

             

        </script> 

         
    </body> 
</html>
Copier après la connexion
Si vous souhaitez ajouter des images, vous pouvez ajouter le contenu derrière var pics1. C'est ça.
Pour plus d'articles sur le carrousel d'images js (5 images), veuillez faire attention au site Web PHP chinois !