kissy几种图片滚动的方式

原创 2015年07月09日 10:00:03

  • #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、同时只显示一张图片

<div id="slides">

    <div id="display_2_scrollPic">

        <div id="display_2_scrollPic_up" class="horizontal">
            <img id="img_up" src="./resource/display_2_scrollPic_up.jpg"/>
        </div>
        <div id="display_2_scrollPic_pic" class="horizontal tab-content">
            <img class="tab-pannel" src="./resource/display_2_pic.png"/>
            <img class="tab-pannel" src="./resource/1.jpg"/>
            <img class="tab-pannel" src="./resource/2.jpg"/>
        </div>
        <div id="display_2_scrollPic_down" class="horizontal">
            <img id="img_down" src="./resource/display_2_scrollPic_down.png"/>
        </div>

    </div>

</div>

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

<!-- reset清除默认样式 -->
        <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>

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

<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
            }
        ]
    });
    
    /*display_2图片滚动效果*/
    KISSY.use(
        'kg/index',
        function(S,Slide){
            
            C = new Slide(
                'slides',
                {
                    autoSlide:true,
                    hoverStop:true,
                    effect:'hSlide',
                    timeout:3000,
                    speed:300,
                    invisibleStop:true,
                    eventType:'mouseover',
                    triggerDelay:400,
                    //carousel:true,
                    defaultTab:5,
                    selectedClass:'current',
                    carousel:true,
                    touchmove:true
                }
            )
            
            S.one('#display_2_scrollPic_up').on('click',function(e){
                e.halt();C.previous();
                if(C.autoSlide && C.stoped === false){C.stop().play();}
            });
            S.one('#display_2_scrollPic_down').on('click',function(e){
                e.halt();C.next();
                if(C.autoSlide && C.stoped === false){C.stop().play();}
            });
            
        }
    );

</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><!-- 导入的css会定义样式 -->
    <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>


相关文章推荐

从word导出图片的几种方式

  • 2013年05月24日 23:15
  • 120KB
  • 下载

Android 文本滚动效果的几种实现方式(二)

这一篇文章介绍了通过自定义surfaceview方法来实现通知滚动效果。这个方法的好处就是可以不受主线程影响,大家应该都知道Android所有绘制界面操作都是只允许在主线程中,但是surfacevie...
  • qlx2522
  • qlx2522
  • 2015年09月08日 15:44
  • 244

html 图片显示的几种方式

1,直接访问: 2,间接访问: 需要CGI配合,返回的数据为图片数据 重点在这:Content-type: image/jpeg 3,直接给数据: 说明: data:,          ...

Android Handler加载图片的几种方式(完)

图片加载

Android几种加载网络图片的方式(附带源码Demo)

我们在android项目中经常会接触到加载网络图片的情况,这里向大家展示几种最为常见访问网络图片的几种方式。...
  • mkosto
  • mkosto
  • 2016年07月07日 10:57
  • 182

Android图片压缩的几种方式

图片的几种压缩方式总结实际项目中,对图片的压缩处理相当常见,下面总结几种压缩的方式: 只压缩质量的方式: /** * 只压缩质量的方法 * @param file 源文件 ...

iOS开发中拉伸图片的几种方式

在iOS开发中,经常会遇到控件尺寸和图片大小不匹配的情况. 一些情况下, 我们需要对图片进行拉伸, 以满足美观需求. 总的来说, 图片的拉伸方式可以分为两种, 一种是通过Xcode自带的Sh...

OC_图片拉伸的几种方式(拉伸、切片)

OC_图片拉伸的几种方式(拉伸、切片)

Android图片压缩几种方式

图片压缩在Android开发中很常见也很重要,防止图片的OOM也是压缩的重要原因。 首先看下Bitmap图片文件的大小的决定因素: Bitmap所占用的内存 = 图片长度 x 图片宽度 x 一个像...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:kissy几种图片滚动的方式
举报原因:
原因补充:

(最多只允许输入30个字)