js淘宝kissy框架按钮控制幻灯片图片滑块特效代码下载


js淘宝kissy框架按钮控制幻灯片图片滑块特效代码下载
js淘宝kissy框架按钮控制幻灯片图片滑块特效代码下载以及按钮控制、幻灯片图片滑块等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/mini-full.js"></script>

3. HTML代码

<!-- 代码 开始 -->
<div id="example">
    <div id="slides"><!--Slide控件开始-->
        <div class="slides_container tab-content">
            <div class="tab-pannel pn1">
                <img class="tbg" src="images/t1e1h2xalcxxxabqsu-1000-500.jpg">
                <img class="pa sublayer1-1" src="images/t1c_41xudexxa8yrnc-260-296.png" alt="sublayer" rel="alpha: false,slideindirection: top, offsetin:160,durationin: 1000,easingin:easeboth,slideoutdirection:bottom,offsetout:160,durationout:1000,easingout:easeboth">
                <img class="pa sublayer1-2" src="images/t1max2xqxexxa4cdzu-534-526.png" alt="sublayer" rel="alpha: false,slideindirection: top, offsetin:180,durationin: 2100,easingin:easeboth,slideoutdirection:bottom,offsetout:180,durationout:2100,easingout:easeboth">
                <h1 class="pa sublayer1-3" alt="sublayer" rel="alpha: true,slideindirection: top, offsetin:130,durationin: 3300,easingin:elasticout,delayin:700,slideoutdirection:bottom,offsetout:130,durationout:3300,easingout:backout,delayout:700">
                    layerslider
                </h1>
                <h2 class="pa sublayer1-4" alt="sublayer" rel="alpha: true,slideindirection: left, offsetin:400,durationin: 1500,easingin:backout,delayin:1500,slideoutdirection:right,offsetout:400,durationout:1500,easingout:backout,delayout:1500">
                    the smartest slideshow plugin
                </h2>
                <h2 class="pa sublayer1-5" alt="sublayer" rel="alpha: true,slideindirection: left, offsetin:400,durationin: 1500,easingin:backout,delayin:1700,slideoutdirection:right,offsetout:400,durationout:1500,easingout:backout"> 
                    with breathtaking effects!
                </h2>
            </div>
            <div class="tab-pannel">
                <img class="tbg" src="images/t1w9t1xslexxxabqsu-1000-500.jpg">
                <img class="pa sublayer2-1" src="images/t1iqx1xqxfxxa_ofah-435-366.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:800,durationin: 1800,easingin:backout,delayin:300,slideoutdirection:left,offsetout:800,durationout:1800,easingout:backout,delayout:300">
                <img class="pa sublayer2-2" src="images/t17jl3xpnxxxxesnfh-337-74.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:300,durationin: 1000,easingin:backout,delayin:1200,slideoutdirection:left,offsetout:300,durationout:1000,easingout:backout,delayout:1200">
                <img class="pa sublayer2-3" src="images/t1o0j1xuhfxxc_blbt-249-59.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:300,durationin: 1000,easingin:backout,delayin:1400,slideoutdirection:left,offsetout:300,durationout:1000,easingout:backout,delayout:1400">
                <img class="pa sublayer2-4" src="images/t1u5x1xtxexxafarbk-209-55.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:300,durationin: 1000,easingin:backout,delayin:1600,slideoutdirection:left,offsetout:300,durationout:1000,easingout:backout,delayout:1600">
            </div>
            <div class="tab-pannel pn3">
                <img class="tbg" src="images/t1d3v2xt0cxxxabqsu-1000-500.jpg">
                <img class="pa sublayer3-1" src="images/t14xx2xdvbxxb2zkgm-209-163.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:400,durationin: 1000,easingin:easeboth,delayin:600,slideoutdirection:left,offsetout:400,durationout:1000,easingout:easeboth,delayout:600">
                <img class="pa sublayer3-2" src="images/t1aah3xztaxxb9nfbu-361-257.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:420,durationin: 1000,easingin:easeboth,delayin:800,slideoutdirection:left,offsetout:420,durationout:1000,easingout:easeboth,delayout:800">
                <img class="pa sublayer3-3" src="images/t10gt2xvrdxxx0ibl9-488-348.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:300,durationin: 1000,easingin:easeboth,delayin:1000,slideoutdirection:left,offsetout:300,durationout:1000,easingout:easeboth,delayout:1000">
                <img class="pa sublayer3-4" src="images/t1zhx2xtddxxad1kzk-195-152.png" alt="sublayer" rel="alpha: false,slideindirection: right, offsetin:410,durationin: 1000,easingin:easeboth,delayin:700,slideoutdirection:left,offsetout:410,durationout:1000,easingout:easeboth,delayout:700">
                <h2 class="pa sublayer3-5" alt="sublayer" rel="alpha: false,slideindirection: bottom, offsetin:410,durationin: 1000,easingin:backout,delayin:1500,slideoutdirection:top,offsetout:410,durationout:1000,easingout:backout,delayout:1500">
                    you can customize the plugin
                </h2>
                <h2 class="pa sublayer3-6" alt="sublayer" rel="alpha: false,slideindirection: bottom, offsetin:410,durationin: 1000,easingin:backout,delayin:1700,slideoutdirection:top,offsetout:400,durationout:1000,easingout:backout,delayout:1700"> 
                    you can modify the easing,
                </h2>
                <h2 class="pa sublayer3-7" alt="sublayer" rel="alpha: false,slideindirection: bottom, offsetin:410,durationin: 1000,easingin:backout,delayin:1900,slideoutdirection:top,offsetout:410,durationout:1000,easingout:backout,delayout:1000"> 
                    delay, duration and parallax effect.
                </h2>
            </div>
        </div>
        <a href="javascript:void(0);" class="prev" id="J_pre"><img src="images/pre.png" width="24" height="43" alt="Arrow Prev"></a>
        <a href="javascript:void(0);" class="next" id="J_next"><img src="images/next.png" width="24" height="43" alt="Arrow Next"></a>
        <ul class="tab-nav pagination">
            <li>
            <a href="javascript:void(0);">1</a>
            </li>
            <li>
            <a href="javascript:void(0);">2</a>
            </li>
            <li>
            <a href="javascript:void(0);">3</a>
            </li>
        </ul>
    </div><!--Slide控件结束-->
    <img src="images/box.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
<script type="text/javascript">
var S = KISSY;
var srcPath = "../../../";
KISSY.use('gallery/slide/1.3/',function(S,Slide){
        var C = new Slide('slides',{
autoSlide:false,
effect:'hSlide',
timeout:6000,
speed:700,
selectedClass:'current',
carousel:true,
touchmove:true,
layerSlide:true
});
S.one('#J_pre').on('click',function(e){
    e.halt();
    C.previous().stop().play();
    });
S.one('#J_next').on('click',function(e){
    e.halt();
    C.next().stop().play();
    });
});
</script>

相关推荐

发表评论

相关文章