2. 程式人生 > >滑屏輪播——translateX版

滑屏輪播——translateX版

阿新 • • 發佈：2019-01-23
document.addEventListener( //用於阻止系統預設的選單、文字預設選中、橡皮筋回彈效果 //缺點：系統預設滾動條消失 "touchstart", function(e){ e.preventDefault(); } ); window.onload = function(){ var
wrap=document.querySelector('#wrap'); var list=document.querySelector('#list'); var lis=document.querySelectorAll('#list li'); var navSpan=document.querySelectorAll('#nav span'); //用JS動態設定wrap的高度和ul、li的width; var css=document.querySelector('#css'
); var style="#wrap{height:"+lis[0].offsetHeight+"px;}"; style+="#list{width:"+lis.length*100+"%}"; style+="#list li{width:"+(1/lis.length)*100+"%}"; css.innerHTML+=style; var startPoint=0;//用於儲存手指按下的座標 var startX=0
;//用於儲存手指按下時滾動層UL的translateX位移值 var wrapW=wrap.offsetWidth;//wrap的佔位寬 var translateX=0;//用於儲存滾動層UL的translateX位移值 wrap.addEventListener( "touchstart", function(e){ var touch=e.changedTouches[0]; startPoint=touch.pageX;//手指按下時手指距離螢幕X軸的距離 startX=translateX;//手指按下時滾動層UL的translateX位移值 } ); wrap.addEventListener( "touchmove", function(e){ var touch=e.changedTouches[0]; var nowPoint=touch.pageX;//手指移動時手指距離螢幕X軸的距離 var distance=nowPoint-startPoint;//手指移動時距離 translateX=startX+distance;//手指按下時UL應該距離螢幕X軸的距離 list.style.webkitTransform=list.style.transform="translateX("+translateX+"px)"; } ); wrap.addEventListener( "touchend", function(){ //判斷移動超過一半時自動移動下一張，未到一半時回到當前張 var now = Math.round(-translateX/wrapW); console.log(now); translateX = -now*wrapW; list.style.webkitTransform=list.style.transform="translateX("+translateX+"px)"; //下面的pagination跟隨圖片一起更新位置 for(var i=0,len=lis.length;i<len;i++){ navSpan[i].className=""; } navSpan[now].className="active"; } ); }

相關推薦

滑屏輪播——translateX版

document.addEventListener( //用於阻止系統預設的選單、文字預設選中、橡皮筋回彈效果 //缺點：系統預設滾動條消失 "touchstart",

全屏banner及全屏輪播

鼠標移出 banner blog pan ont float true nts data- 一、全屏banner 1、設置網頁圖片全屏banner <!DOCTYPE html> <html lang="en"> <head>

jQuery五屏輪播手風琴切換代碼

query href 分享 amp 手風琴 logs markdown title con jQuery五屏輪播手風琴切換代碼 在線演示本地下載 jQuery五屏輪播手風琴切換代碼

純js輪播測試版

post wid 背景 切換 round 效果 定時器 asc text 這是一個純js寫的輪播測試版，代碼有待改進 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&

Main3Activity側滑加輪播圖

adapter 設置圖 pmap cal json switch fail source fin public class Main3Activity extends AppCompatActivity { private int num = 10; priva

加載並全屏輪播加載的其他網站的頁面

msr can https scrip 退出 lse explore exp btn 加載並全屏輪播加載的其他網站的頁面 一、 設計思路 1、使用iframe標簽加載其他網站頁面 2、通過js替換iframe的加載鏈接 3、通過js的定時器實現輪播 4、通過js實現全屏

vue全屏輪播

his ... spl center methods mat tex enter ati 自己造的一個Vue輪播圖，支持全屏、無限滾動，功能有待完善 敬上代碼，拋磚引玉 <template> <div class="swiper-wrap

bootstrap 自適應全屏輪播可支援左右滑動

// 本文所使用的 Bootstrap 版本為 v3.0.3 因為最近開發的專案涉及到移動裝置上的 HTML5 開發，其中需要實現輪播效果。 然後最快捷的方式，你知道的（Bootstrap），然後原生的 Bootstrap 的 carousel.js 外掛並

bootstrap 的全屏輪播

 <div class="onepage">               <div class="container" id="myCarousel">         <div id="carousel-example-generic" cl

移動端滑屏全應用【二】滑屏封裝注意事項與移動端輪播

移動端滑屏封裝注意事項： 1.touchMove時候方向判斷（可以控制在 以x軸位中心正負15度之內為橫向滑屏，縱向滑屏同理） 2.上下滑屏與左右滑屏的衝突(判斷使用者滑動方向後，只做單方向的處理) 3.安卓觸控(例如某個人手指很粗)觸發touchMove（記錄上一次的手指座標，每一次move的時候判斷

移動端滑屏全應用【二】滑屏封裝註意事項與移動端輪播

round width sca chm lse sna slide ner win 移動端滑屏封裝註意事項： 1.touchMove時候方向判斷（可以控制在 以x軸位中心正負15度之內為橫向滑屏，縱向滑屏同理） 2.上下滑屏與左右滑屏的沖突(判斷用戶滑動方向後，只做單方

Android高階圖片滾動控制元件，編寫3D版的圖片輪播器 一屏顯示多個圖片

大家好，好久不見了，最近由於工作特別繁忙，已經有一個多月的時間沒寫部落格了，我也是深感慚愧。那麼今天的這篇既然是闊別了一個多月的文章，當然要帶來更加給力點的內容了，那麼話不多說，趕快進入到今天的正題吧。 說到圖片輪播器，很多的Android應用中都會帶有這個

Android側滑菜單和輪播圖之滑動沖突

解決 float 自定義 else switch hid 通過 表示 猜想 接手一個項目，有一個問題需要修改：輪播圖不能手動滑動，手動滑動輪播圖只會觸發側滑菜單。 猜測：viewpager控件（輪播圖）的觸摸事件被SlidingMenu控件（側滑菜單，非第三方項目，乃是

無縫輪播（框架版）

put this top ole javascrip posit style .class ack 無縫輪播（框架版） <style type=‘text/css‘> *{ margin:0; padding:0;}

Swiper實現全屏視覺差輪播

簡單 ini shee cal 背景圖 reason 教師節 http tor Swiper作為當代流行的js框架，非常受到青睞，這裏演示swiper在pc端全屏視覺輪播的效果，這也是pc端常用的一種特性 一 以教師節為主題的一個全屏輪播 　　1 首先加載插件，需要用到的

側滑+多條目+上拉載入+下拉重新整理+無線輪播

APP package com.example.week_02_02; import android.app.Application; import com.nostra13.universalimageloader.core.DisplayImageOptions; import

jq版輪播圖

UNC ready clear dde stop left float bottom div html部分 <div class="banner"> <ul class="img"> <li><img sr

側滑+fragment切換頁面+fragment巢狀+二次取樣+輪播圖+gridview展示圖片+網路請求資料+資料庫

全域性配置Appliction 所需要的依賴有：implementation ‘com.google.code.gson:gson:2.8.5’ implementation ‘com.nostra13.universalimageloader:universal-image-loader:

側滑+多條目+上拉載入+下拉重新整理+無限輪播+網路判斷

1.MainActivity頁面 package com.example.week2_02; import android.content.DialogInterface; import android.content.Intent; import android.support.v4

PullList+多條目（困難版（輪播圖+資料展示））

1.Fragment頁面 public class PullFragment extends Fragment { private PullToRefreshListView pull; private PullBase pullBase; private int page; priv