< html>
< head>
< meta charset=“utf-8”>
< title>carousel模块快速使用< /title>
< link rel=“stylesheet” href="/static/build/layui.css" media=“all”>
< /head>
< body>
<Div class = "layui-Carousel" ID = "test1">
<div Carousel-Item>
<div> entry. 1 </ div>
<div> entry 2 </ div>
<div> entry. 3 </ div>
<div > entry. 4 </ div>
<div> entry. 5 </ div>
</ div>
</ div>
<Script>
layui.use ([ 'Carousel', 'Element', 'Layer'], function () {
var = Carousel layui.carousel;
Layer = layui.layer;
var = layui.element Element; // navigation hover effect, two menu functions, rely element modules
// build instance
INS = carousel.render ({
elem: '# test1'
, width: '100%' // set the container width
, arrow: 'none' // always arrows show
//, anim: 'updown' // switch animation
});
});
. $ ( "# test1") ON ( "touchstart", function (E) {
var e.originalEvent.targetTouches startX = [0 ] .pageX; // start coordinates X-
$ (the this) .on ( 'touchMove', function (E) {
arguments [0] .preventDefault (); // default phone browser events prevent
});
$ (the this). ON ( 'touchEnd', function (E) {
var endX, e.originalEvent.changedTouches = [0] .pageX; // end coordinates X
e.stopPropagation (); // stop DOM event propagation shelf upwards
IF (endX, - startX> 30) {
ins.slide ( "Sub");
}
the else IF (startX - endX,> 30) {
ins.slide ( " the Add ");
}
$ (the this) .off ( 'touchMove touchEnd');
});
})
</ Script>
</ body>
</ HTML>
