touch.js主要在桌面模拟了手指触摸,滑动,释放等系列事件,值得一看.
源码如下:
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8" />
5: <title>carousel demo</title>
6: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
7: <script src="https://dl.dropbox.com/u/20786642/touch.js" type="text/javascript"></script>
8: <script src="https://dl.dropbox.com/u/20786642/jq.carousel.js" type="text/javascript"></script>
9: <style>
10: .carousel_paging2 { border-radius: 10px; background: #ccc; 10px; height: 10px; float: left; }
11: .carousel_paging2_selected { border-radius: 10px; 10px; height: 10px; float: left; background: #000; }
12: .carousel_content { -webkit-transform: translate3d(0, 0, 0); }
13: #carousel img {
14: -webkit-transition: all 0.5s ease-in-out;
15: -webkit-transform: scale(1);
16: 300px;
17: height: 420px;
18: }
19: </style>
20: </head>
21: <body>
22: <div id="carousel" style="height:420px; 300px;margin:auto; ">
23:
24: <div style="background: yellow;">
25: <a href="javascript:alert('test');">
26: I'm a horizontal carousel
27: </a>
28: </div>
29: <div style="background: green;"></div>
30: <div style="background: blue;"></div>
31: <div style="background: pink;"></div>
32:
33: </div>
34: <div id="carousel_dots" style="text-align: center; margin:auto; clear: both; z-index: 200; position:relative;
35: top:-50px; ">
36: </div>
37: <script>
38: //pagingDiv: 分页标志容器
39: //pagingCssName: 分页标志容器样式类
40: //pagingCssNameSelected: 分页标志选中的样式类.
41: //vertical: 是否垂直方向
42: //horizontal: 是否横向方向.
43: var carousel=$("#carousel").carousel({ pagingDiv: "carousel_dots", pagingCssName: "carousel_paging2", pagingCssNameSelected: "carousel_paging2_selected", preventDefaults:false });
44: </script>
45: </body>
46: </html>
分类: carousel