2017.1.08用bootstrap构造响应式轮播图

来源：互联网发布：svm smo python 编辑：程序博客网时间：2024/05/17 08:58

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

0 0