<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>支持移动端手势滑动的幻灯片切换</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="swipeslider.min.js"></script><!--引入js文件-->
<!-- <link rel="stylesheet" type="text/css" href="swipeslider.css"> -->
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container,#full_feature{
width: 100%;
height: auto;
margin: auto;
}
#full_feature{
position: relative;
}
.swipslider {
overflow: hidden;
display: block;
/* padding-top: 60%;*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.swipslider .sw-slides {
display: block;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
white-space: nowrap;
font-size: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
bottom: 0; }
.swipslider .sw-slide {
width: 100%;
height: 10rem;
margin: auto;
display: inline-block;
position: relative; }
.swipslider .sw-slide > img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.swipslider .sw-slide .sw-content {
width: 100%;
height: 100%;
margin-left: 0;
margin-right: 0;
font-size: 14px; }
.sw-next-prev {
font-family: "Courier New", Courier, monospace;
height: 50px;
width: 50px;
text-align: center;
vertical-align: middle;
position: absolute;
line-height: 50px;
font-size: 30px;
font-weight: bolder;
color: rgba(160, 160, 160, 0.53);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
text-decoration: none;
transition: all .2s ease-out;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.sw-next-prev:hover {
background-color: rgba(255, 255, 255, 0.74); }
.sw-next-prev:active {
background-color: rgba(255, 255, 255, 0.5); }
.sw-prev {
left: 2%; }
.sw-prev::after {
content: '<'; }
.sw-next {
right: 2%; }
.sw-next::after {
content: '>'; }
.sw-bullet {
display: none !important;
position: absolute;
bottom: 2%;
list-style: none;
display: block;
width: 100%;
text-align: center;
padding: 0;
margin: 0; }
.sw-bullet li {
width: 10px;
height: 10px;
background-color: rgba(160, 160, 160, 0.53);
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: all .2s ease-out; }
.sw-bullet li:hover {
background-color: rgba(255, 255, 255, 0.74); }
.sw-bullet li.active {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 2px rgba(160, 160, 160, 0.53); }
.sw-bullet li:not(:last-child) {
margin-right: 5px;
}
</style>
<body>
<div class="container">
<div id="full_feature" class="swipslider">
<ul class="sw-slides">
<li class="sw-slide">
<img src="http://www.jq22.com/img/cs/500x300a.png" alt="">
</li>
<li class="sw-slide">
<img src="http://www.jq22.com/img/cs/500x300b.png" alt="">
</li>
<li class="sw-slide">
<img src="http://www.jq22.com/img/cs/500x300c.png" alt="">
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#full_feature').swipeslider();
});
</script>
</body>
</html>
swipeslider.min.js 文件：
!function(n){
n.fn.swipeslider=function(i){
function t(){q=B.width(),p()
}
function e(n){
A&&(l(),n.originalEvent.touches&&(n=n.originalEvent.touches[0]),0==H&&(H=1,M=n.clientX)
)}
function o(n){
var i;i=n.originalEvent.touches?n.originalEvent.touches[0]:n;var t=i.clientX-M;
if(1==H&&0!=t&&(H=2,N=z*-q),2==H){n.preventDefault();var e=1;
(0==z&&i.clientX>M||z==Q-1&&i.clientX<M)&&(e=3),j=N+t/e,T(!1),x(j)
}}
function s(n){2==H&&(H=0,z=N>j?z+1:z-1,z=Math.min(Math.max(z,0),Q-1),j=z*-q,u(),p(),a()),H=0}
function u(){
A=!1,window.setTimeout(c,G)}function c(){A=!0}function l(){L=!1,window.clearTimeout(K)}
function a(){
O&&(L=!0,f())}function f(){
L&&(K=window.setTimeout(r,J))
}
function r(){d(),f()}
function d(){z+=1,p()}
function w(){z-=1,p()}
function p(){
T(!0),x(-z*q),0==z?window.setTimeout(m,G):z==Q-1&&window.setTimeout(v,G),k(z)}
function v(){h(1)}function m(){h(Q-2)}
function h(n){T(!1),z=n,x(-q*z),window.setTimeout(g,50)}
function g(){T(!0)}function T(n){X(n?"all":"none")}
function x(n){B.css("transform","translateX("+n+"px)")}
function y(n){B.css("transition-duration",n+"ms")}
function b(n){B.css("transition-timing-function",n)}
function X(n){B.css("transition-property",n)}
function E(){B.after('<span class="sw-next-prev sw-prev"></span>'),D.find(".sw-prev").click(function(){L&&(l(),w(),a())}),
B.after('<span class="sw-next-prev sw-next"></span>'),
D.find(".sw-next").click(function(){L&&(l(),d(),a())})}
function P(n){B.after('<ul class="sw-bullet"></ul>');
for(var i=B.parent().find(".sw-bullet"),t=0;n>t;t++){
0==t?i.append('<li class="sw-slide-'+t+' active"></li>'):i.append('<li class="sw-slide-'+t+'"></li>');
var e=D.find(".sw-slide-"+t);!function(n){e.click(function(){l(),z=n+1,p(),a()})}(t)}}function k(n){
var i=0;i=0==n?Q-3:n==Q-1?0:n-1,D.find(".sw-bullet").find("li").removeClass("active"),D.find(".sw-slide-"+i).addClass("active")}var D=this,B=this.find(".sw-slides"),C={transitionDuration:500,autoPlay:!0,autoPlayTimeout:4e3,timingFunction:"ease-out",prevNextButtons:!0,bullets:!0,swipe:!0,sliderHeight:"60%"},F=n.extend(C,i),H=0,M=0,N=0,j=0,z=0,Q=0,q=0,A=!0,G=F.transitionDuration,I=F.swipe,J=F.autoPlayTimeout,K=void 0,L=!0,O=F.autoPlay;
return function(){n(D).css("padding-top",'0px'),q=B.width(),n(window).resize(t),F.prevNextButtons&&E(),B.find(".sw-slide:last-child").clone().prependTo(B),B.find(".sw-slide:nth-child(2)").clone().appendTo(B),Q=B.find(".sw-slide").length,F.bullets&&P(Q-2),y(G),b(F.timingFunction),X("all"),I&&(B.on("mousedown touchstart",e),n("html").on("mouseup touchend",s),n("html").on("mousemove touchmove",o)),h(1),a()}(),D}}(jQuery);