《Bootstrap廣告輪播加強版》自動產生分頁鈕與變成標籤鈕:Realtime－2015花千骨線上看tv 2016花千骨花千骨線上看drama q 花千骨線上看drama 仙俠奇緣之花千骨線上看花千骨線上看tv543 電視劇花千骨線上看花千骨線上看第一集

Blogtrottr

♣梅問題‧教學網【Minwt】♣

3C|設計|攝影|旅遊資訊網

《Bootstrap廣告輪播加強版》自動產生分頁鈕與變成標籤鈕

Jan 8th 2015, 00:00, by admin

　　Bootstrap是目前相當主流的一個CSS Framework，除了好用易上手外，再來就是內建有許多的特效可使用，而在眾多的特效中，廣告輪播是最為好用，也是最為實用，完全不用寫任何的程式碼，只要按照Bootstrap的標籤架構來使用，就能快速的產生出廣告輪播相當的好用，雖然說很簡單也很好用，但有個比較不方便的就是，要自己手動新增分頁鈕，就有點小小的不便，因此梅干就把花了時間，將它變成自動化產生，自動偵測有幾則廣告，而產生多少分頁鈕外，且還加入了標籤按鈕模式，因此若覺得點不方便使用時，還可將分頁小鈕，改成頁籤鈕，如此一來就更容易切換廣告輪播，因此有在使用Bootstrap的朋友，也一塊來看看吧!!

CSS樣式：
放在....之間：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

              /*廣告輪播的寬度大小*/
                .coverflow{max-width: 700px;}
 
                .mwt-title-btn{
                        bottom: 10px;
                }
 
                /*標籤按鈕樣式與大小*/
                .mwt-title-btn li{
                        width: 120px;
                        height: 60px;
                        float: left;
                        margin:3px;
                        padding: 3px;
                        background: rgba(255,255,255,0.6);
                        border-radius: 0;
                        border: 0;
                        text-indent: 0;
                }
 
                /*正在輪播樣式*/
                .mwt-title-btn li.active{
                        width: 120px;
                        height: 60px;
                        border-bottom:solid 5px #ec2a45;
                        background: rgba(0,0,0,0.6);
                        color: #fff;
                        margin-top: 3px;
                }

HTML：
放在....之間：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Javascript：
放在

之前：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

               <script src="dist/js/jquery-1.11.0.min.js">script>
                <script src="dist/js/bootstrap.min.js">script>
                <script type="text/javascript">
                        $(function(){
                                var total = $('.carousel-inner div.item').size();
                                var mwt = $("ol").index('.mwt-title-btn');
                                append_li();
 
                                var left = $('.container').width() - ($('.carousel-indicators li').width()*total);
                                if(mwt ==0){
                                        $(".carousel-indicators").css('left',left);
                                }
                                function append_li()
                                {
                                        var li = "";
                                        var get_ac = $( ".active" );
                                        var ac =  $( ".carousel-inner div" ).index( get_ac );
 
 
                                        for (var i=0; i <= total-1; i++){
                                                if(i == ac){
                                                        if(mwt == 0){
                                                                li += ""+$(".item img").eq(i).attr("alt")+"
";        
                                                        }else{
                                                                li += "
";                                   
                                                        }
                                                }else{
                                                        if(mwt == 0){
                                                                li += ""+$(".item img").eq(i).attr("alt")+"
";
                                                        }else{
                                                                li += "
";
 
                                                        }
                                                }
                                        }
 
                                        $(".carousel-indicators").append(li);
                                }
                        });
 
                        $( window ).resize(function() {
                                var total = $('.carousel-inner div.item').size();
                                var left = $('.container').width() - ($('.carousel-indicators li').width()*total);
                                if(mwt ==0){
                                        $(".carousel-indicators").css('left',left);
                                }
                        });
                script>

完成後，就可看到，原來分頁的小圓按鈕，已變成標籤式按鈕，如此一來好用，二來使用者也知道，每個廣告輪播的項目，就不用老在那試半天。
梅問題-《Bootstrap》廣告輪播加強版，自動產生分頁鈕與標籤鈕

[範例預覽] | [範例下載]

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions