移動端的輪播圖 用的非常廣泛.在這里,寫了一個輪播圖.
注意是手機端的,朋友們預覽的時候,請把瀏覽器調成手機模式.否則鼠標點擊無效.
在這個例子里用的是rem相對布局,針對不同設備的屏幕,
可以自適應.輪播圖的移動,也是利用了css3的運動效果.
減少對DOM操作.提高性能.有一些小細節就放在代碼注釋里解釋吧.
觀看預覽效果可以點擊下方網址
http://www.qdfuns.com/notes/38669/de3ee8d350ade59f3de44da0136a795a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="copyright" content="謝爾鐸Sheldon">
<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>無縫滾動輪播圖</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
#box{
width:16rem;
height: 7.5rem;
overflow: hidden;
position: relative;
margin:0 auto;
}
#box ul{
width:96rem;
height: 7.5rem;
transform: translateX(-16rem);
}
#box ul li{
width:16rem;
height:7.5rem;
float: left;
font-size:2rem;
color: #fff;
line-height: 7.5rem;
text-align: center;
}
</style>
<script>
//這是用js 監聽屏幕的大小來改變根元素的font-size
(function(win,doc){
function change(){
doc.documentElement.style.fontSize = doc.documentElement.clientWidth*20/320 +'px';
}
change();
win.addEventListener('resize',change,false);
})(window,document);
</script>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oBox = document.getElementById('box');
var oUl = document.querySelector('#box ul');
var aLi = oUl.children;
var iNow = 1;
var x = -iNow*aLi[0].offsetWidth;
//在這里設置一個開關,是css運動結束后解鎖
var bReady = true;
oUl.addEventListener('touchstart',function(ev){
if(bReady==false){return;}
bReady = false;
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 = 'translate3d('+x+'px,0,0)';
}
function fnEnd(ev){
var upX = ev.changedTouches[0].pageX;
//判斷是否移動距離大于50
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;}
}
}
//儲存此時ul的位置
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
oUl.style.transition = '200ms all ease';
//監聽li 當移動到兩端的li時 瞬間移回
function tEnd(){
if(iNow==5){
iNow=1;
}
if(iNow==0){iNow=4;}
oUl.style.transition = 'none'
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
bReady = true;
}
oUl.addEventListener('transitionend',tEnd,false);
//釋放內存
document.removeEventListener('touchend',fnEnd,false);
document.removeEventListener('touchmove',fnMove,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
//阻止默認事件
ev.preventDefault();
},false);
},false);
</script>
</head>
<body>
<div id="box">
<ul>
<li style ="background:green">3</li>
<li style="background: red;">0</li>
<li style="background: yellow;">1</li>
<li style="background: blue;">2</li>
<li style ="background:green">3</li>
<li style="background: red;">0</li>
</ul>
</div>
</body>
</html>
歡迎交流 喜歡的話就點個贊??吧ｂ（￣▽￣）ｄ!
