Mobile Events - Slides with Moving Screen Switching

After yesterday's basic understanding of mobile, let's use native JS to implement our slide show today.

Because it is implemented natively, this article is a long one. Every viewer just needs to understand the idea, and the code part can be roughly looked at.

After all, we have better-scroll frameworks that encapsulate better to achieve faster results.b()d

First, according to our slideshow operation yesterday, we will make the slideshow effect first.Here you can get results by changing the photo address to your own.

The case needs to be effective on the client side. If on the PC side, right-click in the web page and there is a mobile icon next to the controller, clicking on this image below will also be effective.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            font-size: 10vw;
        }
        body {
            margin: 0;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #wrap {
            position: relative;
            width: 100vw;
            overflow: hidden;
        }
        #list {
            float: left;
            display: flex;
            display: -webkit-box;
        }
        #list li {
            flex: none;
            width: 100vw;
        }
        #list img {
            width: 100%;
            display: block;
        }
        .nav {
            position: absolute;
            left: 0;
            bottom: .2rem;
            width: 100%;
            text-align: center;
            vertical-align: top;
        }
        .nav a {
            display: inline-block;
            width: .3rem;
            height: .3rem;
            background: #fff;
            margin: 0 .1rem;
            border-radius: .15rem;
            transition: .3s;
        }
        .nav .active {
            width: .6rem;  
            color: #fff;  
        }
    </style>
</head>
<body>  
<div id="wrap">
    <ul id="list">
        <li><img src="img/banner01.png" /></li>
        <li><img src="img/banner02.png" /></li>
        <li><img src="img/banner03.png" /></li>
        <li><img src="img/banner04.png" /></li>
    </ul>
    <nav class="nav">
        <a class="active"></a><a></a><a></a><a></a>
    </nav>
</div>  
<script>
 // slide effect   
{
    let wrap = document.querySelector("#wrap");
    let list = document.querySelector("#list");
    let navs = document.querySelectorAll(".nav a");
    let translateX = 0; //Moving position of element
    let startPoint = {}; //Finger coordinates when pressed down
    let disPoint = {};//Finger movement distance
    let startX = 0;//Element coordinates when pressed down

    wrap.addEventListener("touchstart",({changedTouches})=>{
        startPoint = {
            x: changedTouches[0].pageX,
            y: changedTouches[0].pageY
        };
        startX = translateX;
    });
    wrap.addEventListener("touchmove",(e)=>{
        let touch = e.changedTouches[0];
        let nowPoint = {
            x: touch.pageX,
            y: touch.pageY
        };
        disPoint = {
            x: nowPoint.x - startPoint.x,
            y: nowPoint.y - startPoint.y
        };
        translateX = disPoint.x + startX;
        list.style.transform = `translateX(${translateX}px)`;
    });
}   
</script>
</body>
</html>

 

After the slidescreen effect is made, we add animation to it, and then just write JavaScript code for your convenience.Red is the new code added.

<script>
 // slide effect   
{
    let wrap = document.querySelector("#wrap");
    let list = document.querySelector("#list");
    let navs = document.querySelectorAll(".nav a");
    let translateX = 0; //Moving position of element
    let startPoint = {}; //Finger coordinates when pressed down
    let startX = 0;//Element coordinates when pressed down
    let disPoint = {};//Finger movement distance
    let now = 0; // Which record is currently in
    const Range = .3* wrap.clientWidth; // Move over screen 30% When lifting, switch to the next one

    wrap.addEventListener("touchstart",({changedTouches})=>{
        list.style.transition = "none";
        startPoint = {
            x: changedTouches[0].pageX,
            y: changedTouches[0].pageY
        };
        startX = translateX;
        
    });
    wrap.addEventListener("touchmove",(e)=>{
        let touch = e.changedTouches[0];
        let nowPoint = {
            x: touch.pageX,
            y: touch.pageY
        };
        disPoint = {
            x: nowPoint.x - startPoint.x,
            y: nowPoint.y - startPoint.y
        };
        translateX = disPoint.x + startX;
        list.style.transform = `translateX(${translateX}px)`;
    });
    wrap.addEventListener("touchend",()=>{
        if(Math.abs(disPoint.x)>Range){ //Switch to Next
            //console.log(disPoint.x/Math.abs(disPoint.x));
            now -= disPoint.x/Math.abs(disPoint.x);
            // Which one do you want to see now?
        }
        translateX = -now*wrap.clientWidth;
        list.style.transition = ".3s";
        list.style.transform = `translateX(${translateX}px)`;
        //console.log(now);
    });
}   
</script>

In this step, we will make a judgment after each finger leaves the screen to determine if the finger is moving more than 30 percent, and if it is lifted, we will switch to the next one.We added a 0.3s delay animation for each switch.Because this delayed animation takes effect when the finger touches the screen, we clear it when we touch the start.

 

Once we achieve this, we can see that there is a risk of scrolling out, and then we have to scroll seamlessly

Before we do that, we need to understand how seamless scrolling works. Here's a diagram that shows you at a glance, and if you don't understand it, you can comment and contact me.

 

 

The principle is that when a user slides to the first one in the first group, we move him to the first one in the second group.

When the second group of User Networks slides last, we move it to the last one in the first group.

<script>
 // slide effect   
{
    let wrap = document.querySelector("#wrap");
    let list = document.querySelector("#list");
    let navs = document.querySelectorAll(".nav a");
    let translateX = 0; //Moving position of element
    let startPoint = {}; //Finger coordinates when pressed down
    let startX = 0;//Element coordinates when pressed down
    let disPoint = {};//Finger movement distance
    let now = 0; // Which record is currently in
    const Range = .3* wrap.clientWidth; // Move over screen 30% When lifting, switch to the next one
    list.innerHTML += list.innerHTML; // Copy a list picture
    wrap.addEventListener("touchstart",({changedTouches})=>{
        list.style.transition = "none";
        startPoint = {
            x: changedTouches[0].pageX,
            y: changedTouches[0].pageY
        };
        if(now === 0){
            now = navs.length;
        } else if(now === navs.length*2-1){
            now = navs.length - 1;
        }
        translateX = -now*wrap.clientWidth;
        list.style.transform = `translateX(${translateX}px)`;
        startX = translateX;
        
    });
    wrap.addEventListener("touchmove",(e)=>{
        let touch = e.changedTouches[0];
        let nowPoint = {
            x: touch.pageX,
            y: touch.pageY
        };
        disPoint = {
            x: nowPoint.x - startPoint.x,
            y: nowPoint.y - startPoint.y
        };
        translateX = disPoint.x + startX;
        list.style.transform = `translateX(${translateX}px)`;
    });
    wrap.addEventListener("touchend",()=>{
        if(Math.abs(disPoint.x)>Range){ //Switch to Next
            //console.log(disPoint.x/Math.abs(disPoint.x));
            now -= disPoint.x/Math.abs(disPoint.x);
            // Which one do you want to see now?
        }
        translateX = -now*wrap.clientWidth;
        list.style.transition = ".3s";
        list.style.transform = `translateX(${translateX}px)`;
    });
}   

To achieve this effect, we first make a copy of the picture, and then when we tap the screen with our finger,

Judging if this is the first one in the first group or if it is the first one in the second group

"Or if it is the last one in the second group, or if it is the last one in the first group.

Seamless scrolling can be achieved by making changes to translateX in its style.

 

Then we synchronize the white dots below, just add the following code under touchend

// synchronization nav
navs.forEach(item=>{
      item.classList.remove("active");
});
navs[now%navs.length].classList.add("active");

So far we have completed a simpler mobile-side rotation.

however

We also have a bug that whenever a user slides up diagonally, both the broadcast and the following will slide.

So we need to do:

1. Determine if the user wants to slide a slide or scroll a scrollbar
2. Block scrollbars if you want to slide
3. Block slides if you want to scroll the bar
4. Note that once the user's sliding direction is determined during the sliding process, no direction modification is made

Here are all the effects

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            font-size: 10vw;
        }
        body {
            margin: 0;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #wrap {
            position: relative;
            width: 100vw;
            overflow: hidden;
        }
        #list {
            float: left;
            display: flex;
            display: -webkit-box;
        }
        #list li {
            flex: none;
            width: 100vw;
        }
        #list img {
            width: 100%;
            display: block;
        }
        .nav {
            position: absolute;
            left: 0;
            bottom: .2rem;
            width: 100%;
            text-align: center;
            vertical-align: top;
        }
        .nav a {
            display: inline-block;
            width: .3rem;
            height: .3rem;
            background: #fff;
            margin: 0 .1rem;
            border-radius: .15rem;
            transition: .3s;
        }
        .nav .active {
            width: .6rem;  
            color: #fff;  
        }
        .textList {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .textList li {
            font: 14px/40px "Song Style";
            padding-left: 20px;
            border-bottom: 1px solid #000;
        }
    </style>
</head>
<body>  
<div id="wrap">
    <ul id="list">
        <li><img src="img/banner01.png" /></li>
        <li><img src="img/banner02.png" /></li>
        <li><img src="img/banner03.png" /></li>
        <li><img src="img/banner04.png" /></li>
    </ul>
    <nav class="nav">
        <a class="active"></a><a></a><a></a><a></a>
    </nav>
</div>  
<ul class="textList">

</ul>
<script>
"use strict";

// Supplementary List Content
{
  var txtList = document.querySelector(".textList");
  txtList.innerHTML = [...(".".repeat(100))].map(function (item, index) {
    return "<li>\u8FD9\u662F\u7B2C" + index + "\u4E2Ali</li>";
  }).join("");
} // Slide

/*
    When judging the user's sliding direction:
        Once the user's sliding direction is determined, it is assumed that the user wants to slide up, down or left, without any modification in the middle, until the next time the user performs start
*/

{
  var wrap = document.querySelector("#wrap");
  var list = document.querySelector("#list");
  list.innerHTML += list.innerHTML; // Copy a picture for seamless processing

  var startPoint = {}; // Finger position when pressed down

  var startX = 0; // Position of element when pressed down

  var translateX = 0; // Elemental tranlateX value

  var now = 0; //Which record is currently in

  var navs = document.querySelectorAll(".nav a");
  var RANGE = wrap.clientWidth * .3; //Switch from previous to next one beyond this range

  var isMove = false; // Need to slide

  var isDir = true; // Has the record been directed true No direction has been determined yet. false Direction has been determined

  wrap.addEventListener("touchstart", function (_ref) {
    var changedTouches = _ref.changedTouches;
    list.style.transition = "none";
    var touch = changedTouches[0];
    startPoint = {
      x: touch.pageX,
      y: touch.pageY
    };

    if (now == 0) {
      //Group 1 Item 0 runs the risk of being scrapped out
      now = navs.length;
    } else if (now == navs.length * 2 - 1) {
      // Last in Group 2, risk of delimitation
      now = navs.length - 1;
    }

    translateX = -now * wrap.clientWidth;
    list.style.WebkitTransform = list.style.transform = "translateX(" + translateX + "px)";
    startX = translateX;
    isMove = false;
    isDir = true;
  });
  wrap.addEventListener("touchmove", function (e) {
    var touch = e.changedTouches[0];
    var nowPoint = {
      x: touch.pageX,
      y: touch.pageY
    };
    var dis = {
      x: nowPoint.x - startPoint.x,
      y: nowPoint.y - startPoint.y
    }; // Determine direction to block default events as needed

    if (isDir) {
      if (Math.abs(dis.x) - Math.abs(dis.y) > 5) {
        // Slide left and right
        isMove = true;
        isDir = false;
      } else if (Math.abs(dis.y) - Math.abs(dis.x) > 5) {
        // Slide up and down
        isMove = false;
        isDir = false;
      }

      e.preventDefault();
    }

    console.log(isMove, isDir);

    if (isMove) {
      translateX = startX + dis.x;
      list.style.WebkitTransform = list.style.transform = "translateX(" + translateX + "px)";
      e.preventDefault();
    }
  });
  wrap.addEventListener("touchend", function (_ref2) {
    var changedTouches = _ref2.changedTouches;
    var touch = changedTouches[0];
    var nowPoint = {
      x: touch.pageX,
      y: touch.pageY
    };
    var dis = {
      x: nowPoint.x - startPoint.x,
      y: nowPoint.y - startPoint.y
    }; // When moving more than 30 times the width of the picture% Switch to next or previous page when,Otherwise go back to the current page

    if (Math.abs(dis.x) >= RANGE && isMove) {
      // Switch from previous to next
      //console.log(dis.x,dis.x/Math.abs(dis.x));
      now -= dis.x / Math.abs(dis.x);
    } //console.log(-now*wrap.clientWidth);


    translateX = -now * wrap.clientWidth;
    list.style.transition = ".3s";
    list.style.WebkitTransform = list.style.transform = "translateX(" + translateX + "px)";
    navs.forEach(function (nav) {
      nav.classList.remove("active");
    });
    navs[now % navs.length].classList.add("active");
  });
}
</script>

</body>
</html>

Tags: Javascript Mobile IE

Posted on Sat, 21 Mar 2020 12:05:42 -0400 by chillininvt