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

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

CSS樣式:
放在<head>....</head>之間:
		/*廣告輪播的寬度大小*/
.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:
放在<body>....</body>之間:
<div class="container coverflow">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- 若要取消標籤式按鈕,只需將mwt-title-btn拿掉即可 -->
            <ol class="carousel-indicators mwt-title-btn"></ol>
            <div class="carousel-inner">
                <!-- 廣告輪播的圖片與連結位置 -->
                <div class="item"><a href="https://www.minwt.com/life/11795.html"><img src="dist/img/01.jpg" alt="3D列印跨足時尚界"></a></div>
                <div class="item active"><a href="https://www.minwt.com/life/11382.html"><img src="dist/img/02.jpg" alt="自製「星巴克女神」手機保護殼"></a></div>
                <div class="item"><a href="https://www.minwt.com/dc/11774.html"><img src="dist/img/03.jpg" alt="SONY QX1拍照不受限"></a></div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
    </div>	

Javascript:
放在</body>之前:
<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 += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"' class='active'>"+$(".item img").eq(i).attr("alt")+"</li>";	
					}else{
						li += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"' class='active'></li>";					
					}
				}else{
					if(mwt == 0){
						li += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"' class=''>"+$(".item img").eq(i).attr("alt")+"</li>";
					}else{
						li += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"' class=''></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》廣告輪播加強版,自動產生分頁鈕與標籤鈕
[範例預覽] | [範例下載]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 3 梅留言

  • 第3梅
    hao 說道:

    發現一個問題 剛開啟網頁後放著不動 等一下開始輪撥時 圖片會變空白

  • 第2梅
    sample 說道:

    我用現在正版 bootstrap 3.3.4 “http://getbootstrap.com/getting-started/#download"
    無法正常的套用 還有 能否講解一下 他換1次圖片的時間間隔 在哪裡修改@@ 感激不盡

    回應:
    $(‘.carousel’).carousel({
    interval: 2000
    })
  • 第1梅
    DODO 說道:

    哇~這個好讚喔!
    每次都要試點點就覺得…..嗯….