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>


Kissy整体架构 - Kissy框架学习笔记01

个人学习前段开发过程中的一些经验总结,希望这个博客能记录下我的成长历程,每天进步一点。 也希望跟大家共同学习,欢迎评论,转载请注明出处。...
  • Nifury
  • Nifury
  • 2016年01月05日 21:22
  • 3321

KISSY基础篇乄KISSY之DOM(2)

KISSY之DOM(2) 今日任务:深入学习DOM知识及进一步完善拆合菜单实例 在上一篇的教程中,明河使用KISSY.DOM的常用方法制作了一个拆合菜单,同时也演练到了几个常用方法,比如addCl...
  • lyxcfl
  • lyxcfl
  • 2016年12月14日 19:56
  • 489

淘宝Kissy框架使用记录

最近项目移动端的部分进度差不多了,是时候转向PC端了。没入职的时候后端同事们前端很苦手,用了easyUI进行了简单搭建。无奈easyUI的bug略多,准备转向淘宝的Kissy框架。这篇文章用于记录使用...
  • saturn4711
  • saturn4711
  • 2016年03月16日 10:42
  • 700

KISSY基础篇乄KISSY之IO(2)

第14天:KISSY之IO(2) 今日任务:创建Maven Project并学习IO模块. 这一节我们主要来看一下IO模块里的一些方法。 一、Maven Project (1)创建mavenp...
  • lyxcfl
  • lyxcfl
  • 2017年01月06日 19:35
  • 355

KISSY基础篇乄KISSY之Event

今日任务:了解学习Event事件的基础知识 Event 模块是KISSY最重要的模块之一,他包含自定义事件机制、事件对象封装、DOM事件封装、面向多终端的事件行为统一。下辖多个子模块,被Node、DO...
  • lyxcfl
  • lyxcfl
  • 2016年12月14日 19:34
  • 487

修改的Kissy富文本编辑器

这几天一直在寻找好用的在线富文本编辑器,本人的要求并不要,不需要有太多的功能,找来找去觉得Kissy Editor更适合自己,功能满足要求,而且界面简洁令人看着舒坦。但是有一些问题:1. 最大字符数不...
  • chennanfei
  • chennanfei
  • 2010年01月28日 14:59
  • 2606

KISSY基础篇乄KISSY之HelloWorld

KISSY之HelloWorld 今日任务:使用kissy实现简单的hello World! 一、新建Kissy测试项目          打开STS,File->StaticWeb Proje...
  • lyxcfl
  • lyxcfl
  • 2016年12月12日 20:24
  • 622

KISSY基础篇乄KISSY之Node(1)

KISSY之Node(1) 今日任务:学习Node模块,对拆合菜单实例代码进行优化重构. 前面我们分别讲解了DOM 和Event模块,那时是按照使用什么模块就引用什么模块的原则编写代码的。同时,我...
  • lyxcfl
  • lyxcfl
  • 2016年12月16日 19:50
  • 474

创建线程有几种不同的方式?

①继承Thread类(真正意义上的线程类),是Runnable接口的实现。 ②实现Runnable接口,并重写里面的run方法。 ③使用Executor框架创建线程池。Executor框架是juc...
  • wang_xing1993
  • wang_xing1993
  • 2017年04月20日 10:45
  • 2713

KISSY uploader

 KISSY  是由阿里集团前端工程师们发起创建的一个开源 JS 框架。它具备模块化、高扩展性、组件齐全,接口一致、自主开发、适合多种应用场景等特性。本人在一次项目中层使用这个uploader组...
  • wilsonke
  • wilsonke
  • 2014年09月22日 11:06
  • 3076
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:kissy几种图片滚动的方式
举报原因:
原因补充:

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