Bootstrap3的响应式缩略图幻灯轮播效果设计

• 在线演示1

• 本地下载 

HTML

<div class="container">  <div class="col-md-12">  <h3>Bootstrap 3 缩略图幻灯画廊效果</h3>  </div>  </div>  <div class="container">  <!-- main slider carousel -->  <div class="row">  <div class="col-md-12" id="slider">    <div class="col-md-12" id="carousel-bounding-box">  <div id="myCarousel" class="carousel slide">  <!-- main slider carousel items -->  <div class="carousel-inner">  <div class="active item" data-slide-number="0">  <img src="http://www.gbtags.com/gb/laitu/1200x480&amp;text=1" class="img-responsive">  </div>  <div class="item" data-slide-number="1">  <img src="http://www.gbtags.com/gb/laitu/1200x480&amp;text=2" class="img-responsive">  </div>  <div class="item" data-slide-number="2">  <img src="http://www.gbtags.com/gb/laitu/1200x480&amp;text=3" class="img-responsive">  </div>  <div class="item" data-slide-number="3">  <img src="http://www.gbtags.com/gb/laitu/1200x480&amp;text=4" class="img-responsive">  </div>  <div class="item" data-slide-number="4">  <img src="http://www.gbtags.com/gb/laitu/1200x480&amp;text=5" class="img-responsive">  </div>  <div class="item" data-slide-number="5">  <img src="http://www.gbtags.com/gb/laitu/1200x480&amp;text=6" class="img-responsive">  </div>  <div class="item" data-slide-number="6">  <img src="http://www.gbtags.com/gb/laitu/1200x480&amp;text=7" class="img-responsive">  </div>  <div class="item" data-slide-number="7">  <img src="http://www.gbtags.com/gb/laitu/1200x480&amp;text=8" class="img-responsive">  </div>  </div>  <!-- main slider carousel nav controls -->   <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>  </div>  </div>    </div>  </div>  <!--/main slider carousel-->    <div class="row">  <div class="col-md-12">  <!-- thumb navigation carousel -->  <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">    <!-- thumb navigation carousel items -->  <ul class="list-inline">  <li> <a id="carousel-selector-0" class="selected">  <img src="http://www.gbtags.com/gb/laitu/80x60&amp;text=1/efb73e/888888" class="img-responsive">  </a></li>  <li> <a id="carousel-selector-1">  <img src="http://www.gbtags.com/gb/laitu/80x60&amp;text=2/efb73e/888888" class="img-responsive">  </a></li>  <li> <a id="carousel-selector-2">  <img src="http://www.gbtags.com/gb/laitu/80x60&amp;text=3/efb73e/888888" class="img-responsive">  </a></li>  <li> <a id="carousel-selector-3">  <img src="http://www.gbtags.com/gb/laitu/80x60&amp;text=4/efb73e/888888" class="img-responsive">  </a></li>  <li> <a id="carousel-selector-4">  <img src="http://www.gbtags.com/gb/laitu/80x60&amp;text=5/efb73e/888888" class="img-responsive">  </a></li>  <li> <a id="carousel-selector-5">  <img src="http://www.gbtags.com/gb/laitu/80x60&amp;text=6/efb73e/888888" class="img-responsive">  </a></li>  <li> <a id="carousel-selector-6">  <img src="http://www.gbtags.com/gb/laitu/80x60&amp;text=7/efb73e/888888" class="img-responsive">  </a></li>  <li> <a id="carousel-selector-7">  <img src="http://www.gbtags.com/gb/laitu/80x60&amp;text=8/efb73e/888888" class="img-responsive">  </a></li>  </ul>  </div>  </div>  </div>    </div>

Javascript

$('#myCarousel').carousel({ interval: 4000 }); $('[id^=carousel-selector-]').click( function(){ var id_selector = $(this).attr("id"); var id = id_selector.substr(id_selector.length -1); id = parseInt(id); $('#myCarousel').carousel(id); $('[id^=carousel-selector-]').removeClass('selected'); $(this).addClass('selected'); }); $('#myCarousel').on('slid', function (e) { var id = $('.item.active').data('slide-number'); id = parseInt(id); $('[id^=carousel-selector-]').removeClass('selected'); $('[id=carousel-selector-'+id+']').addClass('selected'); });

来自： http://www.gbtags.com/gb/share/4368.htm

转载于:https://www.cnblogs.com/Better-Me/p/4208321.html