bootstrap、jQuery动态控制轮播图

在使用bootstrap框架开发网页轮播图的时候，会出现图片之间出现间隙或者当屏幕转为小屏幕或者超小屏幕的时候，轮播的图片并不能很好的适应。下面就使用动态控制轮播的方法解决这些问题。

首先引入bootstrap框架并对轮播图carousel的代码做相关的定制。

index.html

<section id="lk_carousel" class="carousel slide" data-ride="carousel" data-interval=2000>
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#lk_carousel" data-slide-to="0" class="active"></li>
				<li data-target="#lk_carousel" data-slide-to="1"></li>
				<li data-target="#lk_carousel" data-slide-to="2"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active" data-sm-img="imgs/slide_01_640x340.jpg" data-lg-img="imgs/slide_01_2000x410.jpg">
				</div>
				<div class="item" data-sm-img="imgs/slide_02_640x340.jpg" data-lg-img="imgs/slide_02_2000x410.jpg">
				</div>
				<div class="item" data-sm-img="imgs/slide_03_640x340.jpg" data-lg-img="imgs/slide_03_2000x410.jpg">
				</div>
			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#lk_carousel" 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="#lk_carousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</section>

index.css

#lk_carousel{
	margin-top: 111px;
}

#lk_carousel .item{
	background: no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
}

@media screen and (min-width:800px){
	#lk_carousel .item{
		height: 410px;
	}
} 

index.js

$(function(){
	$(window).on("resize",function(){
		// 1.1 获取窗口的宽度
		let clientW = $(window).width();
		// 1.2设置临界值
		let isShowBigImage = clientW >= 800;
		// 1.3获取所有的item
		let $allItem = $("#lk_carousel .item");
		// 1.4遍历
		$allItem.each(function(index,item){
			// 1.4.1取出图片的路径
			let src = isShowBigImage ? $(item).data("lg-img") : $(item).data("sm-img");
			let imgUrl = 'url("' + src + '")';
			// 1.4.2设置背景
			$(item).css({
				backgroundImage:imgUrl
			});
			// 1.4.3设置img标签
			if(!isShowBigImage){
				// 当屏幕宽度小于800px时 则显示640x340像素图片
				let $img = "<img src='" + src + "'>";
				$(item).empty().append($img);
			}else{
				// 当屏幕宽度大于800px时，则显示2000x410像素图片，移除640x340像素图片
				$(item).empty()
			}
		});
	});
	$(window).trigger("resize");
	}