JSSDK组件图片左右切换效果-20131012

最新推荐文章于 2022-08-04 22:35:24 发布

xjwolaile

最新推荐文章于 2022-08-04 22:35:24 发布

阅读量100

点赞数

分类专栏：前端技术 kissy 学习

本文链接：https://blog.csdn.net/xjwolaile/article/details/84488255

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

kissy

3 篇文章 0 订阅

订阅专栏

1、效果及功能说明

jssdk组件的页面左右切换效果

2、实现原理

是通过计算每次显示区域的为多少从而做出左右移动的效果

主要的方法

5是移动的数量 500是移动显示出来的距离有多少 fales是能不能重复移动


var carousel = new Carousel('#demo6', {
            effect: 'scrollx',
            easing: 'easeOutStrong',
            steps: 5,
            viewSize: [500],
            circular: false,
            prevBtnCls: 'prev',
            nextBtnCls: 'next',
            //autoplay:true,//是否自动切换
            disableBtnCls: 'disable',
            lazyDataType: 'img-src'
        });

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0090/1416/4ea8c2c4-a14a-38e5-8886-4a1a4df0c2e6.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码


<!DOCTYPE HTML>

<html>
<head>
<style>
  .s-demo{overflow:hidden;text-overflow:ellipsis; width:550px; height: 200px;}
  .ks-switchable-nav{position:relative; top: 20px; left: 200px;}
</style>
</head>

<body>
<div id="demo6" class="s-demo scrollable">
  <ul class="ks-switchable-nav">
            <li class="ks-active">•</li>
            <li>•</li>
            <li>•</li>
        </ul>
    <span id="scroller-prev" class="prev disable">‹ 上一页</span>
    <span id="scroller-next" class="next">下一页 ›</span>
    <div class="scroller">
        <div class="ks-switchable-content">
            <!-- 1-5 -->
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1.XGaXalnXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img04.taobaocdn.com/tps/i4/T1oEmXXmVoXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img04.taobaocdn.com/tps/i4/T1oEmXXmVoXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img03.taobaocdn.com/tps/i3/T1Hm1XXipvXXXXXXXX-110-135.png"/>
            <!-- 5-10 -->
            <img id='carousel_lazy1' alt=""
                 data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <!-- 10-15 -->
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
        </div>
    </div>
</div>
</body>
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>
<script>
KISSY.use("event,switchable,datalazyload,node", function(S, Event,Switchable) {
    var Carousel = Switchable.Carousel;

    S.ready(function(S) {
        //通过DOM元素新建旋转木马
        var carousel = new Carousel('#demo6', {
            effect: 'scrollx',
            easing: 'easeOutStrong',
            steps: 5,
            viewSize: [500],
            circular: false,
            prevBtnCls: 'prev',
            nextBtnCls: 'next',
            //autoplay:true,//是否自动切换
            disableBtnCls: 'disable',
            lazyDataType: 'img-src'
        });
        carousel.on('itemSelected', function(ev) {
            alert('I am selected. src = ' + ev.item.src);
        });

        window.carousel = carousel;
    });
});
</script>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSSDK组件图片左右切换效果-20131012

1、效果及功能说明 jssdk组件的页面左右切换效果2、实现原理是通过计算每次显示区域的为多少从而做出左右移动的效果主要的方法 5是移动的数量 500是移动显示出来的距离有多少 fales是能不能重复移动[code="html5"]var carousel = new Carousel('#demo6', { effect...
复制链接

扫一扫

专栏目录