原生javascript移動(dòng)端實(shí)現(xiàn)滑動(dòng)banner效果的代碼分析

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 20:23:42

原生javascript移動(dòng)端實(shí)現(xiàn)滑動(dòng)banner效果的代碼分析

本文實(shí)例為大家分享了移動(dòng)端滑動(dòng)banner效果的具體代碼，供大家參考，具體內(nèi)容如下：<。<。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="；content="；yes"；)。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀本文實(shí)例為大家分享了移動(dòng)端滑動(dòng)banner效果的具體代碼，供大家參考，具體內(nèi)容如下：<。<。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="；content="；yes"；)。

這篇文章主要為大家詳細(xì)介紹了原生javascript移動(dòng)端滑動(dòng)banner效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了移動(dòng)端滑動(dòng)banner效果的具體代碼，供大家參考，具體內(nèi)容如下

<!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, //手指滑動(dòng)距離
 endX, //手指停止滑動(dòng)時(shí)X軸坐標(biāo)
 cout = 0, //滑動(dòng)計(jì)數(shù)器
 moveDir; //滑動(dòng)方向
 var movebox = document.querySelector(".movebox"); //滑動(dòng)對(duì)象
 var Li = movebox.querySelectorAll("li"); //滑動(dòng)對(duì)象item
 var width = parseInt(window.getComputedStyle(movebox.parentNode).width); //滑動(dòng)對(duì)象item的寬度

 movebox.style.width = (width*4) + "px"; //設(shè)置滑動(dòng)盒子width
 for(var i = 0; i < Li.length; i++){
 Li[i].style.width = width + "px"; //設(shè)置滑動(dòng)item的width，適應(yīng)屏幕寬度
 }

 //觸摸開始
 function boxTouchStart(e){
 var touch = e.touches[0]; //獲取觸摸對(duì)象
 startX = touch.pageX; //獲取觸摸坐標(biāo)
 endX = parseInt(movebox.style.webkitTransform.replace("translateX(", "")); //獲取每次觸摸時(shí)滑動(dòng)對(duì)象X軸的偏移值
 }

 function boxTouchMove(e){
 var touch = e.touches[0];
 moveX = touch.pageX - startX; //手指水平方向移動(dòng)的距離

 if(cout == 0 && moveX > 0){ //剛開始第一次向左滑動(dòng)時(shí)
 return false;
 }

 if(cout == 3 && moveX < 0){ //滑動(dòng)到最后繼續(xù)向右滑動(dòng)時(shí)
 return false;
 }

 movebox.style.webkitTransform = "translateX(" + (endX + moveX) + "px)"; //手指滑動(dòng)時(shí)滑動(dòng)對(duì)象隨之滑動(dòng)
 }

 function boxTouchEnd(e){
 moveDir = moveX < 0 ? true : false; //滑動(dòng)方向大于0表示向左滑動(dòng)，小于0表示向右滑動(dòng)
 //手指向左滑動(dòng)
 if(moveDir){

 if(cout<3){
 movebox.style.webkitTransform = "translateX(" + (endX-width) + "px)";
 cout++;
 }
 //手指向右滑動(dòng)
 }else{
 //滑動(dòng)到初始狀態(tài)時(shí)返回false
 if(cout == 0){
 return false;
 }else{
 movebox.style.webkitTransform = "translateX(" + (endX+width) + "px)";
 cout--;
 }
 }
 }

 //滑動(dòng)對(duì)象事件綁定
 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;">
 <p 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>
 </p>
</body>

</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

原生javascript移動(dòng)端實(shí)現(xiàn)滑動(dòng)banner效果的代碼分析

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：實(shí)現(xiàn) 代碼滑動(dòng)

熱門焦點(diǎn)

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

原生javascript移動(dòng)端實(shí)現(xiàn)滑動(dòng)banner效果的代碼分析

原生javascript移動(dòng)端實(shí)現(xiàn)滑動(dòng)banner效果的代碼分析

原生javascript移動(dòng)端實(shí)現(xiàn)滑動(dòng)banner效果的代碼分析

最新推薦

猜你喜歡

熱門推薦