検索

ホームページ >ウェブフロントエンド >jsチュートリアル >js画像カルーセル（5枚）

js画像カルーセル（5枚）

高洛峰
高洛峰オリジナル
2017-01-12 10:43:371741ブラウズ

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

写真を追加したい場合は、var pics1 の後ろにコンテンツを追加できます。それでおしまい。

その他の js 画像カルーセル (5 枚の写真) 関連記事については、PHP 中国語 Web サイトに注目してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript は大きな画像のカルーセル効果を実装します次の記事：JavaScript は大きな画像のカルーセル効果を実装します

関連記事

続きを見る