bootstrap實戰--微金所項目(輪播圖2)

利用Jquery+css+html來實現

一、實現思路

將a標籤通過Jquery的方式動態生成然後添加到相應位置即可

二、相關代碼

1. HTML代碼

 <!-- 輪播圖 -->
    <!-- 移動端：輪播圖圖片會隨着屏幕的縮小自動適應 -->
    <div class="wjs_banner">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active"  data-large-image="./images/slide_01_2000x410.jpg" data-mobile-image="./images/slide_01_640x340.jpg">
              <!-- 動態創建a標籤 -->
          </div>
          <div class="item" data-large-image="./images/slide_02_2000x410.jpg" data-mobile-image="./images/slide_02_640x340.jpg">
          </div>
          <div class="item"  data-large-image="./images/slide_03_2000x410.jpg" data-mobile-image="./images/slide_03_640x340.jpg">
            
          </div>
          <div class="item"  data-large-image="./images/slide_04_2000x410.jpg" data-mobile-image="./images/slide_04_640x340.jpg">
            
          </div>
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
    </div>

2. JS代碼

$(function(){
    // 初始化工具提示
    $('[data-toggle="tooltip"]').tooltip()
    // 獲取每個item
    var items = $(".carousel-inner .item")
    // 監聽窗口大小
    $(window).on("resize" , function(){
        // 獲取當前屏幕寬度
        var width = $(window).width()
        // 判斷屏幕的寬度
        if(width >= 768){ //說明是非移動端使用
            // 爲每個item添加子元素一一遍歷
            $(items).each(function(){
                var item = $(this)
                // 以data開頭的自定義屬性可以使用這種方法獲取
                var imgSrc = item.data("largeImage")
                item.html($("<a href='javascript:;' class='PcImg'></a>").css("backgroundImage","url("+imgSrc+")"))
            })

        }else{
            $(items).each(function(){
                var item = $(this)
                var imgSrc = item.data("mobileImage")
                item.html($("<a href='javascript:;' class='PcImg'></a>").css("backgroundImage","url("+imgSrc+")"))
            })
        }
    }).trigger("resize") 
    // 添加移動端的滑動操作
    var startX,endX;
    var carousel_inner=$(".carousel-inner")[0];
    // 獲取當前輪播圖
    var carousel = $(".carousel");
    carousel_inner.addEventListener("touchstart",function(e){
        startX = e.targetTouches[0].clientX;
    })
    carousel_inner.addEventListener("touchend",function(e){
        endX = e.changedTouches[0].clientx;
        if(endX - startX > 0){
            carousel.carousel("prev");
        }else if(endX-startX<0){
             carousel.carousel("next")
        }
    })
})

3. less代碼

.wjs_banner{
    .mobileImg{
        width: 100%;
        display: block;
      }
      .mobileImg > img {
        width: 100%;
        display: block;
      }
      .PcImg{
        width: 100%;
        height: 410px;
        display: block;
        background-position: center center;
        background-size: cover;
      }
}

三、相關知識總結

1. 以data-開頭的自定義屬性
   HTML5規定可以爲元素添加非標準的屬性，但要添加前綴 data- ，目的是爲元素提供與渲染無關的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名，只要以 data- 開頭即可，Jquery的data()方法可以直接操作這種屬性。
2. iscroll.js的使用