2017.1.08用bootstrap构造响应式轮播图

最新推荐文章于 2022-11-16 23:47:49 发布

fredaouyang

最新推荐文章于 2022-11-16 23:47:49 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/fredaouyang/article/details/54234830

版权

要求：利用bootstrap中的carousel插件创建一个响应式轮播图，轮播图要求是：1、当屏幕为大屏幕时让轮播图中的图片大小为2000px*410px大小，当屏幕宽度小于768px时，轮播图中的图片大小为640px*340px；2：当屏幕为小屏幕时，:屏幕进行缩放时，高度并不固定，高度能随着水平缩放进行缩放；3：当浏览器是手机模式时，是轮播图能够跟随用户手指的触摸进行滑动。

知识点：

1、手机触摸事件touch

触摸事件会在用户将手指放在屏幕上、或者在屏幕上滑动、以及手指离开屏幕时开始

touchstart事件：当手指放在屏幕上触发，当手指已经放在屏幕上时也会触发。

touchmove事件：当手指在屏幕上滑动触发，在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指离开屏幕时触发

touches：表示当前跟踪的触摸操作的touch对象的数组。

targetTouches：特定于事件目标的Touch对象的数组。

changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触摸的DOM节点目标。

2.轮播图可以通过js来调试

例如：$(".carousel").carousel();

$(".carousel").carousel("next")轮播循环播放到下一张图片；

$(".carousel").carousel("prev")轮播循环播放到上一张图片

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title></title>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>
<style>
.carousel .carousel-inner .item{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

}
.carousel .carousel-inner .item{
  width: 100%;
}
/*当屏幕为大屏幕时，将轮播的项高度设为410px，则屏幕为小屏幕时由图片撑起轮播项高度*/
@media (min-width: 768px){
  .carousel .carousel-inner .item{
    height: 410px;
  }
}
</style>
<body>
  <section id="slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- 根据屏幕的宽度设置轮播图中图片的大小，当图片为大屏幕时设置轮播图的图片为img-lg的图片，图片为小屏幕时设置轮播图的图片为img-xs的图片 -->
<div class="item active" data-img-lg="img/slide_01_2000x410.jpg" data-img-xs="img/slide_01_640x340.jpg">
</div> 
<div class="item" data-img-lg="img/slide_02_2000x410.jpg" data-img-xs="img/slide_02_640x340.jpg">
</div>
<div class="item" data-img-lg="img/slide_03_2000x410.jpg" data-img-xs="img/slide_03_640x340.jpg">
</div>
<div class="item" data-img-lg="img/slide_04_2000x410.jpg" data-img-xs="img/slide_04_640x340.jpg">
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</section>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/my.js"></script>
</body>
</html>

Js代码：

$(function() {
	function resize() {
		//获取屏幕宽度
		var windowWidth = $(window).width();
		//判断当前屏幕是大屏幕还是小屏幕
		var isSmallWidth = windowWidth < 768;
		//遍历轮播图中每一项		
		$(".carousel-inner>.item").each(function(i, item) {

                        //需要将DOM对象转化为jqurey对象，才能调用jquery方法
			var $item = $(item);
			//根据屏幕宽度给轮播图中的背景图片设置为大图片或是小图片
			var imgUrl = isSmallWidth ? $item.data("img-xs") : $item.data("img-lg");
			$item.css('backgroundImage', 'url("' + imgUrl + '")');
			//当屏幕为小屏幕时，给轮播图加上图片项，使其能够进行等比例缩放
			if (isSmallWidth) {
				$item.html("<img src='" + imgUrl + "'>");
			}
			//否则清除轮播图中的图片内容，以免出现图片重叠
			else {
				$item.empty();
			}
		})
	}
	//触发resize事件
	$(window).on("resize", resize)
		.trigger("resize");

	//当浏览器为手机屏幕时，加上手指滑动轮播图的效果
	//首先，根据手指触摸的轮播图的位置的到用户手指的起始坐标
	var $carousel=$(".carousel");
	var startClientX=0;
	var clientX=30;
	$carousel.on("touchstart",function(e){
	 startClientX=e.originalEvent.touches[0].clientX;
	})

	$carousel.on("touchmove",function(e){
		//然后的得到用户移动后的坐标
		var targetClientX=e.originalEvent.touches[0].clientX;
		//判断用户移动的距离是否超过了阈值
		var target=Math.abs(targetClientX-startClientX);
		if(target>clientX){
			//然后，根据用户移动的方向判断用户是左滑动还是右滑动，根据左右方向触发左右滑动
			$(".carousel").carousel(targetClientX-startClientX>0?"prev":"next");

		}

	})