Maison > Article > interface Web > js carrousel d'images (5 images)

js carrousel d'images (5 images)

高洛峰original: 2017-01-12 10:43:371700parcourir

<!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>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript implémente un effet carrousel de grandes imagesArticle suivant：JavaScript implémente un effet carrousel de grandes images

Articles Liés

Voir plus