支持触屏的jQuery轮播图插件

移动轮播图我看到两类，
一款是无线天猫的m.tmall.com和携程，实现了无缝轮播。
一款是蘑菇街的，没有实现无缝轮播。
我自己重写一个，类似天猫。
1.页面代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>基于jQuery的移动轮播图（支持触屏）</title>
 6     <meta name="viewport" content="maximum-scale=1,initial-scale=1,user-scalable=0">
 7 
 8     <style type="text/css">
 9 
10     img
11     {
12         border:0;
13         *display:inline;
14     }
15     li
16 {
17     border:0;
18     list-style-type :none;  
19 }
20 ul
21 {
22     list-style:none;
23     margin:0;
24     padding:0;
25 }
26     body{
27         overflow-x:hidden;
28         margin:0 auto;
29         padding:0;
30         width: 100%;
31         height: 100%;
32     }
33     .WSCSlideWrapper{
34         width:100%;
35         position: relative;
36         margin:0 auto;
37         //cursor:move;
38     }
39     #WSCSlideWrapperTwo{
40         width:50%;
41         position: relative;
42         margin:10px auto;
43         //cursor:move;
44     }
45     
46     </style>
47     <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/jquery-1.8.2.min.js"></script>
48 
49     <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/touchslide-1.1.js"></script>
50 </head>
51 <body>
52 
53     
54     <div class="WSCSlideWrapper" id="WSCSlideWrapper" >
55     
56         <div>
57         
58             <a  href="http://www.baidu.com"><img src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/1.jpg" /></a>
59       <a  href="http://m.tmall.com"><img src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/2.jpg" /></a>
60      <a href="http://huaban.com"><img src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/3.jpg" /></a>            
61        </div>
62    
63     </div>
64 
65      <div class="WSCSlideWrapper" id="WSCSlideWrapperTwo" >
66         <div>
67              <a><img src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/1 (1).jpg" /></a> 
68              <a><img src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/1 (2).jpg" /></a>    
69              <a><img src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/1 (3).jpg" /></a> 
70              <a><img src="http://sandbox.runjs.cn/uploads/rs/215/auboqjjr/1 (4).jpg" /></a>             
71         </div>
72       
73     </div>
74 <script type="text/javascript">
75  
76 $(document).ready(function(){
77 
78     $('.WSCSlideWrapper').height($('.WSCSlideWrapper').width()*0.3);
79     $('#WSCSlideWrapperTwo').height($('#WSCSlideWrapperTwo').width()*1.5);
80     $('.WSCSlideWrapper').touchslide({timecontrol:3000,animatetime:300,direction:'left',navshow:true,canvassuport:true});
81 });
82 
83     
84 </script>
85 </body>
86 </html>
View Code