1、js原生實現移動端手指滑動輪播圖效果

阿新 • • 發佈：2019-01-19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
</head>
<style>
    html{height 
:100%;}
    body{width: 100%;height:100%;margin:0;overflow: hidden;}
    .wrap{position: relative;overflow: hidden;}
    .box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}
    .box li{float:left;}
    .box{
        position: relative;
height: 2000px;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right 
: 0;
background: red;
}
    .box1{
        height: 2000px;
}
    .box2{
        background: yellow;
}
    .box3{
        background: yellowgreen;
}
    .box4{
        background: orange;
}
    .box5{
        background: cyan;
}
</style>
<body>
<div class="wrap">
    <ul class="box">
        <li 
><div class="box1 box2">11111</div></li>
        <li><div class="box1 box3">2222</div></li>
        <li><div class="box1 box4">3333</div></li>
        <li><div class="box1 box5">4444</div></li>
    </ul>
</div>
<script>
    var aLi = document.querySelectorAll(".box li");
var box = document.querySelector('.box');
var wrap = document.querySelector('.wrap');
var aLiWidth = box.offsetWidth;
console.log('aLiWidth: ' + aLiWidth)
    wrap.style.height = aLi[0].offsetHeight + 'px';
// 設定盒子的寬度
box.style.width = aLi.length*100 + '%';
for(var i=0;i<aLi.length;i++){
        aLi[i].style.width = 1/aLi.length * 100 + '%';
};
// 初始化手指座標點
var startPoint = 0;
var startEle = 0;
//手指按下
wrap.addEventListener("touchstart",function(e){
        startPoint = e.changedTouches[0].pageX;
startEle = box.offsetLeft;
});
//手指滑動
wrap.addEventListener("touchmove",function(e){
        var currPoint = e.changedTouches[0].pageX;
var disX = currPoint - startPoint;
var left = startEle + disX;
box.style.left = left + 'px';
});
//當手指擡起的時候，判斷圖片滾動離左右的距離，當
wrap.addEventListener("touchend",function(e){
        var left = box.offsetLeft;
// 判斷正在滾動的圖片距離左右圖片的遠近，以及是否為最後一張或者第一張
var currNum = Math.round(-left/aLiWidth);
currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
currNum = currNum<=0 ? 0 : currNum;
box.style.left = -currNum*wrap.offsetWidth + 'px';
})

</script>

</body>
</html>

1、js原生實現移動端手指滑動輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

js原生實現移動端手指滑動輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

原生js實現簡單的移動端輪播圖效果

近期接觸了移動端html5和css3，想加入些輪播圖，於是在網上搜集整理了一些資料，經自己補充改進使之較為完善原生JavaScript 移動端web輪播圖片實現功能索引小圓點過渡滑動動畫的定時輪播移動端可以滑動切換圖片滑動距離不夠則吸附回去效果圖

淺談移動端的自適應問題——響應式、rem/em、利用Js動態實現移動端自適應

隨著3G的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？本篇文章將講述自適應網頁設計的概念和方法，使網頁開發人員維護同一個網頁程式碼，即可使網站在多種裝置上具

用css巧妙實現移動端橫向滑動展示功能

公司需要做一個手機橫向滑動的效果，不想用js外掛，太麻煩，匯入程式碼也多。所以去網上找了一下，用css就能實現，挺方便的。主要利用了display:-webkit-box來實現。 <!DOCTYPE html> <html> <head> <ti

原生js實現簡單輪播圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> .father{

使用原生js實現輪播圖效果

這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生js寫了一個輪播圖效果，希望大家喜歡。這是我釋出在github上的最後實現的效果：https://heternally.github.io/banner/ 下面我簡單跟大家說一下

利用原生js實現輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生輪播圖</title> <style type="text

仿京東移動端手指撥動切換輪播圖效果

如今，移動端web頁面在市場上也是佔有相當大的比例，而移動端的輪播圖效果也是很常見的，今天我就來記錄下關於實現一組適用於移動端的可用手指進行撥動切換輪播圖的效果。這個效果的主要技術點依託於觸屏裝置特有的touch事件；好了，接下來就進入主題吧。首先是ht

js原生實現輪播圖效果（面向對象編程）

alt 狀態 off wid 編程） .proto eat doc 持續時間面向對象編程js原生實現輪播圖效果 1.先看效果圖 2.需要實現的功能：自動輪播點擊左右箭頭按鈕無縫輪播點擊數字按鈕切換圖片分析：如何實現無縫輪播？在一個固定大小的相框裏有一個ul

Bootstrap實現基於carousel.js框架的輪播圖效果（無過渡動畫）

宣告式觸發需要使用到的幾個data-*屬性 1.data-ride：作用在最外層容器上，固定值:carousel 2.data-target：作用在class=carousel-indicator

移動端的圖片輪播

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </hea

HTML5移動端觸控式螢幕圖片輪播滑動

//zepto對移動端滑動擴充套件 ;(function($){ var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750,

H5移動端手勢滑動圓盤轉動效果

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name

每天一個JS 小demo之韓雪冬輪播圖。主要知識點：html，css布局，對於數組和對象的理解和運用

身高全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st

用jquery實現帶左右按鍵的輪播圖

round 500px asc pub video 記錄找到 blog span 成品如下：簡單來說就是點擊“右”按鈕時，轉換到右邊的下一幅圖片，同時上面的小方塊顏色也跟著改變，如果已經是最後一幅圖片，再點擊“右”，則轉換到第一幅圖片，是直接向左移找到第一幅圖的，明天

unslider插件實現輪播圖效果

地址 href aid jquery輪播 boot http 用法 .com r.js unslider插件下載地址（含有用法）：http://www.bootcss.com/p/unslider/ 可以　　下載unslider.js文件（http://pan.baidu.

jQuery實現輪播圖效果

代碼實現 idt 代碼 out 顯示 move posit 技術輪播圖任務實現：用jQuery實現輪播圖。來自瓶子啊之小白，歡迎來訪，歡迎指導。相信大家從事前端的開發者初級就是輪播圖，首先我用jquery寫了一個，第二篇我會用原生JavaScript給大家展示。其原

QML實現網頁左右滑動的輪播圖效果

網頁中有很多的左右滑動的圖片輪動的效果。QML實現此效果的兩種方式。 PageIndicator和TabBar 也對應兩種樣式。其中左右滑動的動畫效果是利用SwipeView的預設切換動畫效果 import QtQuick 2.9 import QtQuick.Controls 2.

JS寫一個最簡單的無縫輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

1、js原生實現移動端手指滑動輪播圖效果

相關推薦