Remember that my last article achieved picture-responsive sliding, and if you don't know how to make pictures appear in the center of the ultra-wide screen, and you don't know how to make pictures respond (specifically for mobile), you can continue to read this article I wrote. Hit here hard
So for the mobile side, how to achieve the effect of rotation by sliding your finger left and sliding right? Here I make a simple demo for you with the bootstrap framework, and share it.
First look at bootstrap carousel How to implement it,
.carousel('prev') Slide Previous
Cycles to the previous item.
.carousel('next')Slide Next
Cycles to the next item.So how do I touch my finger, and broadcast the next display on the picture in the map?
A brief summary of the ideas:
- Get the container of the relay map (because the position of the relay map container can be touched later to achieve the effect of left sliding and right sliding of the picture, other positions are invalid);
- Register a touch event for the container of the rotation map to get the X coordinate of the initial touch of your finger and the X coordinate of the instant your finger leaves the screen; (Notes in the implementation js code, please check it yourself)
- Determine the direction in which your fingers are sliding to determine which picture to display.
Code implementation:
html code (this is all bootstrap encapsulated code).I just modified the id)
<!DOCTYPE html>
<html lang="en">
<head>
<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>Move End-Roadmap Finger Left-Right Slide</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="main_ad" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#main_ad" data-slide-to="0" class="active"></li>
<li data-target="#main_ad" data-slide-to="1"></li>
<li data-target="#main_ad" data-slide-to="2"></li>
<li data-target="#main_ad" data-slide-to="3"></li>
<li data-target="#main_ad" data-slide-to="4"></li>
<li data-target="#main_ad" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/l1.jpg" alt="...">
</div>
<div class="item">
<img src="images/l2.jpg" alt="...">
</div>
<div class="item">
<img src="images/l3.jpg" alt="...">
</div>
<div class="item">
<img src="images/l4.jpg" alt="...">
</div>
<div class="item">
<img src="images/l5.jpg" alt="...">
</div>
<div class="item">
<img src="images/l6.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#main_ad" 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="#main_ad" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>js code, I want to take a closer look and think about why we didn't record where the last finger left, but touchmove events.(Because the touchend event indicates that the touch event is over, it is impossible to record the x-coordinate position of a finger just as it left the screen.Repeat the X-coordinate assignment with the touchmove event so that the X-coordinate of your finger can be obtained as soon as it leaves the screen)
Tips:
When registering a touch event with carousel, we need to get its touches property. You can print the event and view it
$carousels.on('touchstart',function (e) {
console.log(e);
});
js code (implemented with jquery)
/**
* Created by Administrator on 2017/7/11.
*/
'use strict';
$(function () {
// Get a sliding direction (left and right) of your finger on the elements of the relay map
// Get a relay map container on the interface
var $carousels = $('.carousel');
var startX,endX;
// Switch pictures within a range of slides
var offset = 50;
// Register Slide Events
$carousels.on('touchstart',function (e) {
// Record the coordinate x of your finger at the beginning of a finger touch
startX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchmove',function (e) {
// The goal is to record where your finger is leaving the screen for an instant and repeat the assignment with the move event
endX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchend',function (e) {
//console.log(endX);
//End touch instantly records the position of the last coordinate x of your finger endX
//Compare the size of endX and startX and get the distance for each movement, which is considered a directional change when the distance is greater than a certain value
var distance = Math.abs(startX - endX);
if (distance > offset){
//Explain directional changes
//Determine whether the previous or next one will appear based on the direction you get
$(this).carousel(startX >endX ? 'next':'prev');
}
})
});Okay, so you can successfully achieve the effect of sliding your finger to the left and right of the broadcast map!