css3特效-传送带示例

演示地址在这里!
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

原文地址：https://blog.csdn.net/weixin_34354173/article/details/93536521?ops_request_misc=&request_id=7c3a0a7c6c264218995b401c42e60581&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-5-93536521-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88