图片滑动-兼容手机与pc端 原
查看js效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style>
html, body{height:100%;margin:0;padding:0}
#canvas{width:100%;height:100%;background:gray;}
ul{list-style:none;margin:0;padding:0;background:black;width:100%;height:100%;position:relative;overflow:hidden;}
ul li{background:black;top:0;position:absolute;width:100%;height:100%;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
ul li img{max-width:100%;max-height:100%}
@media(min-width:600px) {
#canvas{width:500px;height:600px;margin:0 auto;}
}
</style>
</head>
<body>
<!-- 外层画布 -->
<div id="canvas">
</div>
<script type="text/javascript">
//所有的数据
var list = [{
height: 950,
width: 800,
img: "imgs/1.jpg"
},
{
height: 1187,
width: 900,
img: "imgs/2.jpg"
},
{
height: 766,
width: 980,
img: "imgs/3.jpg"
},
{
height: 754,
width: 980,
img: "imgs/4.jpg"
},
{
height: 493,
img: "imgs/5.jpg",
width: 750
},
{
height: 500,
img: "imgs/6.jpg",
width: 750
},
{
height: 600,
img: "imgs/7.jpg",
width: 400
}
];
//构造函数
function slider(opts) {
//构造函数需要的参数
this.wrap = opts.dom;
this.list = opts.list;
//构造三部曲
this.init();
this.renderDom();
this.bindDom();
}
//init()函数
slider.prototype.init = function() {
//this.radio=window.innerHeight/window.innerWidth;
if (window.innerWidth > 600) {
// 屏幕大于600的时候的时候，宽度设置为500px
this.width = 500
} else {
//否则全屏
this.width = window.innerWidth;
}
//当前图片的索引(在视觉范围内的图片下标)
this.idx = 0;
}
//renderDom()函数
slider.prototype.renderDom = function() {
var wrap = this.wrap;
var width = this.width;
var data = this.list;
var len = data.length;
//var radio=this.radio;
//创建ul元素
this.outer = document.createElement("ul");
for (i = 0; i < len; i++) {
//循环创建li元素
var li = document.createElement("li");
var item = data[i];
//下面的宽度可以加px也可以不加，可以直接是数值
//li.style.width=scaleW +"px";
li.style.webkitTransform = 'translate3d(' + i * width + 'px,0,0)'; //此行的px不能省略
li.innerHTML = '<img src="' + item['img'] + '" />'
this.outer.appendChild(li);
}
//wrap.style.height=window.innerHeight + "px";
wrap.appendChild(this.outer);
}
// bindDom()函数,绑定dom事件
slider.prototype.bindDom = function() {
var self = this;
var width = self.width; //
var outer = self.outer;
var len = self.list.length;
var startEvt, moveEvt, endEvt;
if ("ontouchstart" in window) {
startEvt = "touchstart";
moveEvt = "touchmove";
endEvt = "touchend"
} else {
startEvt = "mousedown";
moveEvt = "mousemove";
endEvt = "mouseup";
}
//手指按下的处理事件或者pc端的mousedown
var startHander = function(evt) {
var touches = evt.touches;
if (touches && touches[0]) {
//console.log(touches)
//记录手指按下的坐标
self.startX = touches[0].pageX;
} else {
outer.addEventListener(moveEvt, moverHander);
outer.addEventListener(endEvt, endHander);
self.startX = evt.pageX;
console.log(evt.pageX);
}
//清除偏移量
self.offsetX = 0;
//记录刚刚开始按下的时间
self.startTime = new Date() + 1;
console.log("time")
};
//手指移动的处理事件
var moverHander = function(evt) {
console.log("move")
var touches = evt.touches;
if (touches && touches[0]) {
//兼容chrome android 阻止浏览器默认行为
evt.preventDefault();
//计算手指的偏移量
self.offsetX = touches[0].pageX - self.startX;
console.log(self.offsetX);
} else {
evt.preventDefault();
self.offsetX = evt.pageX - self.startX;
console.log("offsetX:" + self.offsetX)
}
var lis = outer.getElementsByTagName("li");
//起始索引
var i = self.idx - 1;
console.log(i - self.idx)
//结束索引
var m = i + 3;
//最小化改变Dom属性
for (i; i < m; i++) {
lis[i] && (lis[i].style.webkitTransition = '-webkit-transform 0s ease-out');
lis[i] && (lis[i].style.webkitTransform = 'translate3d(' + ((i - self.idx) * self.width + self.offsetX) + 'px,0,0)');
}
};
var endHander = function(evt) {
var type = evt.type;
console.log("up")
console.log(evt)
if (type !== "touchend") {
outer.removeEventListener(moveEvt, moverHander);
}
var lis = outer.getElementsByTagName('li');
var boundory = this.width / 6;
var endTime = new Date() + 1;
if (endTime - self.startTime > 800) {
if (self.offsetX >= boundory) {
//上一页进入
self.go('-1');
} else if (self.offsetX <= -boundory) {
//下一页进入
self.go('+1');
} else {
//留在本页
self.go('0');
}
} else {
//快操作
//优化
if (self.offsetX > 50) {
//上一页进入
self.go('-1');
} else if (self.offsetX < -50) {
//下一页进入
self.go('+1');
} else {
//留在本页
self.go('0');
}
}
};
if ("ontouchstart" in window) {
outer.addEventListener(startEvt, startHander);
outer.addEventListener(moveEvt, moverHander);
outer.addEventListener(endEvt, endHander);
} else {
outer.addEventListener(startEvt, startHander);
}
//outer.addEventListener(moveEvt, moverHander);
//outer.addEventListener(endEvt, endHander);
//outer.removeEventListener(moveEvt, moverHander);
}
slider.prototype.go = function(n) {
var index = this.idx;
console.log(index + " hi")
//var agentIndex;
var lis = this.outer.getElementsByTagName("li");
var width = this.width;
console.log(width)
var len = lis.length;
//接受这样的数据go(5) ，跳到lis 下标为5
if (typeof n == "number") {
//agentIndex=index
index = index
} else if (typeof n == "string") {
console.log("string")
//agentIndex=index+n*1
// 转换类型 go('+1');'+1'*1 = 1;'-1'*1 =-1
index = index + n * 1
}
//处理边界
if (index > len - 1) {
index = len - 1
} else if (index < 0) {
index = 0
}
//this.idx = agentIndex;
this.idx = index
console.log(index)
lis[index].style.webkitTransition = '-webkit-transform 0.2s ease-out'
lis[index - 1] && (lis[index - 1].style.webkitTransition = '-webkit-transform 0.2s ease-out')
lis[index + 1] && (lis[index + 1].style.webkitTransition = '-webkit-transform 0.2s ease-out')
lis[index].style.webkitTransform = 'translate3d(0,0,0)';
lis[index - 1] && (lis[index - 1].style.webkitTransform = 'translate3d(-' + width + 'px,0,0)');
lis[index + 1] && (lis[index + 1].style.webkitTransform = 'translate3d(' + width + 'px,0,0)')
}
new slider({
dom: document.getElementById("canvas"),
list: list
})
//注意'translate3d(-'+width+'px,0,0)' 一定要加px
</script>
</body>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
