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>