css3传送带示例
演示地址在这里!
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
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did48053