要求:利用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");
}
})