css3特效-传送带示例_it博客站

<a id="cb_post_title_url" href="https://www.cnblogs.com/ms_config/archive/2012/09/14/2684385.html">css3特效-传送带示例</a>

<a href="https://dl.dropbox.com/u/20786642/carousel.html">演示地址在这里!</a> 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; width: 10px; height: 10px; float: left; }

  11:           .carousel_paging2_selected {  border-radius: 10px;  width: 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:              width: 300px;

  17:              height: 420px;

  18:           }

  19:        </style>

  20:     </head>

  21:     <body>

  22:        <div id="carousel" style="height:420px; width: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>

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

HuaShen

css3特效-传送带示例

推荐阅读

QQXML 卡片菜单代码分享

【iapp】手电筒源码

Effective-Java 第三版中文版明智审慎地进行优化

【分享】微分身助手手机多开工具

最新评论

当前未登陆哦

关于此站

学习网站

优秀排版个人博客网址

(穷逼博主)在线接单