suchen

Heim >Web-Frontend >js-Tutorial >js Bilderkarussell (5 Bilder)

js Bilderkarussell (5 Bilder)

高洛峰
高洛峰Original
2017-01-12 10:43:371736Durchsuche

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

Wenn Sie Bilder hinzufügen möchten, können Sie den Inhalt hinter var pics1 hinzufügen. Das ist es.

Weitere Artikel zum JS-Bildkarussell (5 Bilder) finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript implementiert den Karusselleffekt für große BilderNächster Artikel：JavaScript implementiert den Karusselleffekt für große Bilder

In Verbindung stehende Artikel

Mehr sehen