alloytouch
Version:
super tiny size touch and physical motion library for the web
125 lines (110 loc) • 4.04 kB
HTML
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
html,body{
margin:0;
padding:0;
}
.carousel {
margin: 0 auto;
overflow: hidden;
position: relative;
}
.nav {
position: absolute;
bottom: 6px;
right: 10px;
}
.nav a {
display: inline-block;
background-color: white;
cursor: pointer;
width: 6px;
height: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #808080;
transition: all .5s ease-in;
}
.nav a.active {
background-color: #ffd800;
width: 10px;
}
.carousel-scroller {
position: relative;
font-size: 0;
}
</style>
</head>
<body style="height:2000px;">
<div id="carousel-container">
<div class="carousel">
<div style="width: 400%;" class="carousel-scroller" id="carousel-scroller">
<img style="width: 25%;" src="asset/ci1.jpg">
<img style="width: 25%;" src="asset/ci2.jpg">
<img style="width: 25%;" src="asset/ci3.jpg">
<img style="width: 25%;" src="asset/ci4.jpg">
</div>
<div class="nav" id="nav">
<a data-index="0" class="active"></a>
<a data-index="1" class=" "></a>
<a data-index="2" class=" "></a>
<a data-index="3" class=" "></a>
</div>
</div>
</div>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:60px;height:60px;">
<img style="width:60px;height:60px;" src="//alloyteam.github.io/github.png" alt="">
</a>
<script src="../transformjs/transform.js"></script>
<script src="../index.js"></script>
<script>
var items = document.querySelectorAll("#nav a");
var scroller = document.querySelector("#carousel-scroller");
Transform(scroller);
new AlloyTouch({
touch: "#carousel-container",//反馈触摸的dom
vertical: false,//不必需，默认是true代表监听竖直方向touch
target: scroller, //运动的对象
property: "translateX", //被运动的属性
min: window.innerWidth * -3, //不必需,运动属性的最小值
max: 0, //不必需,滚动属性的最大值
step: window.innerWidth,
spring: true, //不必需,是否有回弹效果。默认是true
inertia: false, //不必需,是否有惯性。默认是true
touchEnd: function (evt, v, index) {
var step_v = index * this.step * -1;
var dx = v - step_v;
if (v < this.min) {
this.to(this.min);
} else if (v > this.max) {
this.to(this.max);
} else if (Math.abs(dx) < 30) {
this.to(step_v);
}
else if (dx > 0) {
this.to(step_v + this.step);
} else {
this.to(step_v - this.step);
}
return false;
},
animationEnd: function (evt , v) {
var i = 0,
len = items.length;
for (; i < len; i++) {
if (i === this.currentPage) {
items[i].classList.add("active");
} else {
items[i].classList.remove("active");
}
}
}
})
</script>
</body>
</html>