首页 > 代码库 > Bootstrap3的响应式缩略图幻灯轮播效果设计
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&text=1" class="img-responsive"> </div> <div class="item" data-slide-number="1"> <img src="http://www.gbtags.com/gb/laitu/1200x480&text=2" class="img-responsive"> </div> <div class="item" data-slide-number="2"> <img src="http://www.gbtags.com/gb/laitu/1200x480&text=3" class="img-responsive"> </div> <div class="item" data-slide-number="3"> <img src="http://www.gbtags.com/gb/laitu/1200x480&text=4" class="img-responsive"> </div> <div class="item" data-slide-number="4"> <img src="http://www.gbtags.com/gb/laitu/1200x480&text=5" class="img-responsive"> </div> <div class="item" data-slide-number="5"> <img src="http://www.gbtags.com/gb/laitu/1200x480&text=6" class="img-responsive"> </div> <div class="item" data-slide-number="6"> <img src="http://www.gbtags.com/gb/laitu/1200x480&text=7" class="img-responsive"> </div> <div class="item" data-slide-number="7"> <img src="http://www.gbtags.com/gb/laitu/1200x480&text=8" class="img-responsive"> </div> </div> <!-- main slider carousel nav controls --> <a class="carousel-control left" href="http://www.mamicode.com/#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="http://www.mamicode.com/#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&text=1/efb73e/888888" class="img-responsive"> </a></li> <li> <a id="carousel-selector-1"> <img src="http://www.gbtags.com/gb/laitu/80x60&text=2/efb73e/888888" class="img-responsive"> </a></li> <li> <a id="carousel-selector-2"> <img src="http://www.gbtags.com/gb/laitu/80x60&text=3/efb73e/888888" class="img-responsive"> </a></li> <li> <a id="carousel-selector-3"> <img src="http://www.gbtags.com/gb/laitu/80x60&text=4/efb73e/888888" class="img-responsive"> </a></li> <li> <a id="carousel-selector-4"> <img src="http://www.gbtags.com/gb/laitu/80x60&text=5/efb73e/888888" class="img-responsive"> </a></li> <li> <a id="carousel-selector-5"> <img src="http://www.gbtags.com/gb/laitu/80x60&text=6/efb73e/888888" class="img-responsive"> </a></li> <li> <a id="carousel-selector-6"> <img src="http://www.gbtags.com/gb/laitu/80x60&text=7/efb73e/888888" class="img-responsive"> </a></li> <li> <a id="carousel-selector-7"> <img src="http://www.gbtags.com/gb/laitu/80x60&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
Bootstrap3的响应式缩略图幻灯轮播效果设计
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。