Sliding banner effect of native javascript mobile end
- 2021-08-03 08:47:30
- OfStack
In this paper, we share the specific code of sliding banner effect on the mobile terminal for your reference. The specific contents are as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="telephone=yes" name="format-detection" />
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="x5-fullscreen" content="true">
<meta name="apple-touch-fullscreen" content="yes">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.box{
height:200px;
width:100%;
overflow: hidden;
}
.movebox{
height:200px;
width:9000px;
padding:0;
position:relative;
left:0;
}
.movebox li{
height:200px;
float:left;
list-style:none;
font-size:30px;
color:#fff;
}
</style>
<script>
window.onload = function(){
var moveX, // Finger sliding distance
endX, // When the finger stops sliding, X Axial coordinates
cout = 0, // Sliding counter
moveDir; // Sliding direction
var movebox = document.querySelector(".movebox"); // Sliding object
var Li = movebox.querySelectorAll("li"); // Sliding object item
var width = parseInt(window.getComputedStyle(movebox.parentNode).width); // Sliding object item Width of
movebox.style.width = (width*4) + "px"; // Set sliding box width
for(var i = 0; i < Li.length; i++){
Li[i].style.width = width + "px"; // Set sliding item Adj. width Adapt to screen width
}
// Touch start
function boxTouchStart(e){
var touch = e.touches[0]; // Get touch object
startX = touch.pageX; // Get touch coordinates
endX = parseInt(movebox.style.webkitTransform.replace("translateX(", "")); // Gets the sliding object every time you touch it X Offset value of axis
}
function boxTouchMove(e){
var touch = e.touches[0];
moveX = touch.pageX - startX; // The distance the finger moves horizontally
if(cout == 0 && moveX > 0){ // At the beginning of the first 1 When sliding to the left for the second time,
return false;
}
if(cout == 3 && moveX < 0){ // Slide until the last time you continue to slide to the right
return false;
}
movebox.style.webkitTransform = "translateX(" + (endX + moveX) + "px)"; // When the finger slides, the sliding object slides with it
}
function boxTouchEnd(e){
moveDir = moveX < 0 ? true : false; // Sliding direction is greater than 0 Indicates sliding to the left, less than 0 Indicates sliding to the right
// Slide your fingers to the left
if(moveDir){
if(cout<3){
movebox.style.webkitTransform = "translateX(" + (endX-width) + "px)";
cout++;
}
// Slide your fingers to the right
}else{
// Return when sliding to the initial state false
if(cout == 0){
return false;
}else{
movebox.style.webkitTransform = "translateX(" + (endX+width) + "px)";
cout--;
}
}
}
// Sliding object event binding
movebox.addEventListener("touchstart", boxTouchStart, false);
movebox.addEventListener("touchmove", boxTouchMove, false);
movebox.addEventListener("touchend", boxTouchEnd, false);
}
</script>
</head>
<body style="position:absolute;width:100%;overflow:hidden;">
<div class="box">
<ul class="movebox" style="transition-duration:0.2s;transform: translateX(-0px);">
<li style="background:red;">1</li>
<li style="background:yellow">2</li>
<li style="background:blue">3</li>
<li style="background:green">4</li>
</ul>
</div>
</body>
</html>