<!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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5拖拽</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width:16rem;
height:7.5rem;
position: relative;
}
#ul1{
width:64rem;
height: 7.5rem;
position: absolute;
left:0;
top: 0;
}
#ul1 li{
width:16rem;
height:7.5rem;
float: left;
font-size:2rem;
color: #fff;
line-height: 7.5rem;
text-align: center;
list-style: none;
}
</style>
<script>
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=doc.documentElement.clientWidth*20/320+'px';
}
change();
win.addEventListener('resize',change,false);
})(window,document);
window.addEventListener('DOMContentLoaded',function(){
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var x=0;
var iNow=0;
oUl.addEventListener('touchstart',function(ev){
oUl.style.transition='none';
var disX=ev.targetTouches[0].pageX-x;
var downX=ev.targetTouches[0].pageX;
function fnMove(ev){
x=ev.targetTouches[0].pageX-disX;
oUl.style.transform='translateX('+x+'px)';
}
function fnEnd(ev){
var upX=ev.changedTouches[0].pageX;
if(Math.abs(upX - downX)>50){
if(upX -downX<0){
iNow++;
if(iNow==aLi.length){iNow=aLi.length-1}
}else{
iNow--;
if(iNow==-1){
iNow=0;
}
}
}
x=-iNow*aLi[0].offsetWidth;
oUl.style.transform='translateX('+x+'px)';
oUl.style.transition='200ms all ease';
document.removeEventListener('touchmove',fnMove,false);
document.removeEventListener('touchend',fnEnd,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
ev.preventDefault();
},false);
},false);
</script>
</head>
<body>
<div>
<ul id="ul1">
<li style="background: red">1</li>
<li style="background: yellow">2</li>
<li style="background: green">3</li>
<li style="background: blue">4</li>
</ul>
</div>
</body>
</html>
h5輪播圖
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門羊初，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事长赞』拊埽” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵得哆，是天一觀的道長(zhǎng)脯颜。 經(jīng)常有香客問(wèn)我，道長(zhǎng)贩据，這世上最難降的妖魔是什么栋操？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮乐设，結(jié)果婚禮上讼庇，老公的妹妹穿的比我還像新娘。我一直安慰自己近尚，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布场勤。 她就那樣靜靜地躺著戈锻，像睡著了一般。 火紅的嫁衣襯著肌膚如雪和媳。 梳的紋絲不亂的頭發(fā)上格遭，一...
- 那天，我揣著相機(jī)與錄音留瞳，去河邊找鬼拒迅。 笑死，一個(gè)胖子當(dāng)著我的面吹牛她倘，可吹牛的內(nèi)容都是我干的璧微。 我是一名探鬼主播，決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼硬梁，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼前硫！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起荧止，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤屹电，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后跃巡，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體危号，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年素邪，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了外莲。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布俐填，位于F島的核電站，受9級(jí)特大地震影響翔忽，放射性物質(zhì)發(fā)生泄漏英融。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一歇式、第九天 我趴在偏房一處隱蔽的房頂上張望驶悟。 院中可真熱鬧，春花似錦材失、人聲如沸痕鳍。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)笼呆。三九已至，卻和暖如春旨别，著一層夾襖步出監(jiān)牢的瞬間诗赌，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓递览，卻偏偏與公主長(zhǎng)得像叼屠，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子非迹，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 前言 所謂三圖輪播原理:只創(chuàng)建三個(gè)imageView,用來(lái)顯示多于多張圖片,其中心思想是每次都讓中間的imageV...
- 最近在學(xué)習(xí)Vue纯命，然后做了一個(gè)輪播圖西剥，然后想起之前用jQuery做的輪播圖，就打算進(jìn)行一個(gè)對(duì)比亿汞。 jQuery輪播...
- 項(xiàng)目需導(dǎo)入SDWebImage 類型一 簡(jiǎn)單的輪播圖 類型二 帶描述的輪播圖 自定義pageControl的位置 ...
- 網(wǎng)易輪播圖： 案例素材及源碼：鏈接：http://pan.baidu.com/s/1pLgzkVp 密碼：9buw...
