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的使用