swipejs例子

最新推荐文章于 2023-06-30 10:45:50 发布

u010307690

最新推荐文章于 2023-06-30 10:45:50 发布

阅读量908

点赞数

本文链接：https://blog.csdn.net/u010307690/article/details/8903394

版权

<!DOCTYPE HTML>
<html>
<head>
<title>Swipe 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link href='style.css' rel='stylesheet'/>
<style style="text/css">

*{
   margin:0;
   padding:0;
}

.swipe {
position: relative;
overflow: hidden;
visibility: hidden;
width:100%;
height:300px;
background:red;

}
.swipe-wrap {
position: relative;
overflow: hidden;
width:100%;
height:100%;
}
.swipe-wrap > div {
position: relative;
text-align:center;
float:left;
   width:100%;
height:100%;
background:beige;
}
.swipe-wrap > div > img{
   width:100%;
   height:100%;
}

</style>

</head>
<body>
<div id='mySwipe'class='swipe'>
<div class='swipe-wrap'>
    <div><img src=img/3.jpg />0</div>
    <div><img src=img/2.jpg />1</div>
     <div><img src=img/6.jpg />2</div>


</div>
</div>

<div style='position:absolute;bottom:100px;'>

<button οnclick='mySwipe.prev()'>prev</button>
<button οnclick='mySwipe.next()'>next</button>
<button οnclick='mySwipe.slide(0,1)'>p0</button>
   <button οnclick='mySwipe.slide(1,1)'>p1</button>
   <button οnclick='mySwipe.slide(2,1)'>p2</button>

<div id="out"></div>
<div id="out2"></div>
</div>

<script src="js/jquery-1.9.1.js"></script>
<script src='js/swipe.js'></script>
<script>

// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
// startSlide: 4,
// auto: 1000,
// continuous: true,
// speed:50,
// disableScroll: true,
// stopPropagation: true,
callback: function(index, element) {
   $('#out').html(index);
   $('#out2').html(mySwipe.getPos());
},
// transitionEnd: function(index, element) {}
});

// with jQuery
//window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
// mySwipe.auto(10000);

</script>