kissy几种图片滚动的方式

来源：互联网发布：数控车床编程自学网编辑：程序博客网时间：2024/06/05 05:52

#J_tab，Slide的ID，名称自取，必须指定，用作hook
ul.tab-nav,控制导航,必须指定,容器内容可以为空，默认指定自然数为下标，名称可定制
ul.tab-nav li.selected,控制tab页签,若有li，则必须指定，名称可定制
div.tab-content，内容容器，必须指定，名称可定制
div.tab-content div.tab-pannel，内容面板，必须指定，名称可定制

样例代码：

1、同时只显示一张图片

---------------------------------------------------------------------------------------------------------------------------

<link rel="stylesheet" href="http://g.alicdn.com/tb/global/3.5.5/global-min.css">

       
       <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base.css" />


       <script src="../kissy-1.4.8/build/seed-min.js" type="text/javascript"></script>

---------------------------------------------------------------------------------------------------------------------------

2、同时显示多张图片，按按钮切换一张

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>

<script src="http://g.tbcdn.cn/kissy/m/0.2.7/mini-full.js"></script>

<link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base.css" />

<style>

   .scrollable-panel {position: relative;overflow:none !important;background-color: green;height: 50px;width: 1000px;}

   .scrollable-content {overflow:hidden !important;}

   .scrollable-panel img {
       text-align:left;
       display:inline-block;
   }

</style>

</head>
<body>
<div id="JSlide">

   <a href="javascript:void(0);" title="下翻" id="next1" class="next">111</a>
   <a href="javascript:void(0);" title="上翻" id="prev1" class="prev">222</a>


   <div id="panel1" class="scrollable-panel">
       <div class="scrollable-content"><img src="http://img04.taobaocdn.com/tps/i4/T1uRBrXe0XXXXXXXXX-120-60.gif" /></div>
       <div class="scrollable-content"><img src="http://img02.taobaocdn.com/tps/i2/T1bQVrXaVpXXXXXXXX-120-60.gif" /></div>
       <div class="scrollable-content"><img src="http://img01.taobaocdn.com/tps/i1/T1l7FrXgNvXXXXXXXX-120-60.gif" /></div>
       <div class="scrollable-content"><img src="http://img04.taobaocdn.com/tps/i4/T1ikRrXglqXXXXXXXX-120-60.gif" /></div>
       <div class="scrollable-content"><img src="http://img01.taobaocdn.com/tps/i1/T1XYRsXipXXXXXXXXX-120-60.gif" /></div>
       <div class="scrollable-content"><img src="http://img06.taobaocdn.com/tps/i6/T1MQ8rXe8kXXXXXXXX-120-60.gif" /></div>
       <div class="scrollable-content"><img src="http://img05.taobaocdn.com/tps/i5/T1mOJsXXdEXXXXXXXX-120-60.gif" /></div>
       <div class="scrollable-content"><img src="http://img06.taobaocdn.com/tps/i6/T1bkNrXb8sXXXXXXXX-120-60.gif" /></div>
       <div class="scrollable-content"><img src="http://img07.taobaocdn.com/tps/i7/T1Ck8rXiXkXXXXXXXX-120-60.gif" /></div>
   </div>
</div>

<script>
    var S = KISSY;
   var srcPath = "../";
   S.config({
       packages:[
           {
               name:"kg",
               path:srcPath,
               charset:"utf-8",
               combine:false,
               tag:S.now(),
               ignorePackageNameInUri:true,
               debug:true
           }
       ]
   });

   KISSY.use(
       'kg/index',
       function(S,Slide){
           window.s = new Slide(
               'JSlide',
               {
                   // eventType:'click',
                   //navClass:'scrollable-trigger',
                   contentClass:'scrollable-panel',
                   pannelClass:'scrollable-content',
                   selectedClass:'current',
                   triggerSelector:'a',
                   effect:'hSlide',
                   carousel:true,
                   touchmove:true,
                   colspan:3
               }
           )
           .on('afterSwitch',function(e){console.log(e)});
           S.one('#next1').on('click',function(){s.next();});
           S.one('#prev1').on('click',function(){s.previous();});
       }
   );
   </script>

</body>
</html>

0 0