佈局(rem適配)
設計圖寬770px
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
(function () {
var html = document.querySelector('html');
changeRem();
function changeRem() {
var width = html.getBoundingClientRect().width;
if(width>540){
width = 540;
}
html.style.fontSize = width/10+"px";
}
window.onresize = function(){
changeRem();
}
document.addEventListener('touchmove',function (e) {
e.preventDefault();
})
})();
</script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>rem適配輪播</title>
</head>
<body>
<div id="slide">
<ul>
<li><a href=""><img src="img/slide1.jpg" alt=""></a></li>
<li><a href=""><img src="img/slide2.jpg" alt=""></a></li>
<li><a href=""><img src="img/slide3.jpg" alt=""></a></li>
<li><a href=""><img src="img/slide4.jpg" alt=""></a></li>
<li><a href=""><img src="img/slide5.jpg" alt=""></a></li>
</ul>
<div class="dot">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src='js/index4.js'>
/*
未完成版 !! 未解決 實現慢慢滑動判斷條件是滑動的距離大於一定的距離(150px) 手指快速滑動可以直接跳轉
使用 transform 改變 性能更好.有硬件加速
但是transform 是文檔流改變
跳轉條件:
滑動的距離大於屏幕的一半
index4.js marginLeft來控制
滑動的距離大於一定的距離(50px)
index5.js translateX來實現
左右無縫1.html
左右添加了圖片.
!!未解決 角度過直不觸發
*/
</script>
</body>
</html>
index.less用koala創建css
@rem:77rem;
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#slide {
position: relative;
overflow: hidden;
max-width: 540px;
width: 100%;
height: 308/@rem;
margin: 0 auto;
}
#slide ul {
position: relative;
width: 700%;
height: 100%;
}
#slide ul li {
float: left;
width: 770/@rem;
height: 308/@rem;
}
#slide ul li a img {
display: block;
width: 100%;
height: 100%;
}
#slide .dot {
position: absolute;
bottom: 15/@rem;
width: 100%;
font-size: 0;
text-align: center;
}
#slide .dot span {
display: inline-block;
width: 12/@rem;
height: 12/@rem;
margin: 0 10/@rem;
border-radius: 6/@rem;
background: rgba(255,255,255,.6);
}
#slide .dot span.on {
background: #f60;
}左右無縫的理解
index4.js ===> marginLeft來控制
(function () {
var oSlide = document.querySelector('#slide'),
oUl = document.querySelector('#slide ul'),
oSpan = document.querySelectorAll('.dot span'),
// 屏幕寬
width = oSlide.offsetWidth,
length = oUl.children.length,
// 移動的距離
startFinger = 0,
marginLeft = 0,
// 第幾張
num = 0;
// 創建前後圖片
last = oUl.children[length-1].cloneNode(true);
first = oUl.children[0].cloneNode(true);
oUl.insertBefore(last,oUl.children[0]);
oUl.appendChild(first);
// 初始化
length = oUl.children.length;
change(-width);
oSpan[0].className = 'on';
oSlide.addEventListener('touchstart',function (e) {
// 保存觸摸座標
startFinger = e.changedTouches[0].pageX;
// 獲取開始的marginLeft
marginLeft = getStyle(oUl,'marginLeft');
oUl.style.transition = '';
});
oSlide.addEventListener('touchmove',function (e) {
var nowFinger = e.changedTouches[0].pageX,
// 向左滑動 下一張 負值
distance = nowFinger - startFinger + marginLeft;
change(distance);
});
oSlide.addEventListener('touchend',function (e) {
// 鬆開
marginLeft = getStyle(oUl,'marginLeft');
// 達到寬度的一半 讓它下一張
num = Math.round(marginLeft/(width)); //負值
// 鬆開後滑動給過渡效果 ,之前不用
oUl.style.transition = '.5s';
if(num === 0){//第一張 向前翻
change(num*width,function(){
oUl.style.transition = '';
change(-(length-2)*width)
});
// 最後一張
num = -(length-2);
}else if(num == -6){//最後一張 向後翻
change(num*width,function(){
oUl.style.transition = '';
change(-width);
});
// 第一張
num = -1;
}else{//正常情況
change(num*width);
}
// 按鈕同步
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].className = '';
}
console.log(num);
oSpan[-num-1].className = 'on';
})
function change(value,callback){
oUl.style.marginLeft = value + "px";
setTimeout(function(){
callback&&callback();
},500)
}
})();
function getStyle(obj,attr){
var value = obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
return parseInt(value);
}index5.js===>translateX來實現
(function () {
var oSlide = document.querySelector('#slide'),
oUl = document.querySelector('#slide ul'),
length = oUl.children.length,
oSpan = document.querySelectorAll('.dot span'),
// 屏幕寬
width = oSlide.offsetWidth,
// 移動的距離
startFinger = 0,
startX = 0,
translateX = -width,
distance = 0,
num = -1; //初始 第一張 爲 -1;
// 創建前後圖片
last = oUl.children[length-1].cloneNode(true);
first = oUl.children[0].cloneNode(true);
oUl.insertBefore(last,oUl.children[0]);
oUl.appendChild(first);
// 初始化
length = oUl.children.length;
console.log(length);
change(-width);
oSpan[0].className = 'on';
oSlide.addEventListener('touchstart',function (e) {
// 保存觸摸座標
startFinger = e.changedTouches[0].pageX;
// 獲取開始的marginLeft
startX = translateX;
oUl.style.transition = '';
});
oSlide.addEventListener('touchmove',function (e) {
var nowFinger = e.changedTouches[0].pageX;
// 移動的距離
distance = nowFinger - startFinger;
// 向左滑動 下一張 負值
translateX = nowFinger - startFinger + startX;
change(translateX);
});
oSlide.addEventListener('touchend',function (e) {
// 鬆開 distance大於50 下一張
if(Math.abs(distance) > 50){
if(distance<0){ //下一張
num--;
}else{//上一張
num++;
}
}
translateX = num*width;
// 鬆開後滑動給過渡效果 ,之前不用
oUl.style.transition = '.5s';
if(num === 0){//第一張 向前翻
change(translateX,function(){
oUl.style.transition = '';
translateX = -(length-2)*width;
change(translateX);
});
// 最後一張
num = -(length-2);
}else if(num == -6){//最後一張 向後翻
change(translateX,function(){
oUl.style.transition = '';
translateX = -width;
change(translateX);
});
// 第一張
num = -1;
}else{//正常情況
change(translateX);
}
// 按鈕同步
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].className = '';
}
console.log(num);
oSpan[-num-1].className = 'on';
})
function change(value,callback){
oUl.style.WebkitTransform = oUl.style.transform = "translateX(" +value+ "px)";
setTimeout(function(){
callback&&callback();
},500)
}
})();
function getStyle(obj,attr){
var value = obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
return parseInt(value);
}