关闭

kissy几种图片滚动的方式

207人阅读 评论(0) 收藏 举报

  • #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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20102次
    • 积分:658
    • 等级:
    • 排名:千里之外
    • 原创:46篇
    • 转载:6篇
    • 译文:0篇
    • 评论:0条
    文章分类