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