经验分享程序开发文档资料数据资源其它资源

LayerSlider带动画效果幻灯片滑动滚动特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 LayerSlider带动画效果幻灯片滑动滚动特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

LayerSlider带动画效果幻灯片滑动滚动特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>LayerSlider带动画效果幻灯片</title>
<script src="js/mini-full.js"></script>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/d4.css" />
<link rel="stylesheet" href="css/zzsc.css" />
</head>
<body>
<!-- 代码 开始 -->
<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>
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>
<!-- 代码 结束 -->
</body>
</html>

CSS代码(d4.css):

/*pub-1|2013-04-01 15:42:52*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
a:active{outline:none;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
body{font:normal 62.5%/1.5 Helvetica,Arial,sans-serif;letter-spacing:0;color:#434343;padding:20px 0;position:relative;}
#container{width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;}
#example{width:600px;height:350px;position:relative;}
#ribbon{position:absolute;top:-3px;left:-15px;z-index:500;}
#frame{position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}
#slides{position:absolute;top:15px;left:4px;z-index:100;}
#slides .next,#slides .prev{position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}
.slides_container{width:570px;height:270px;overflow:hidden;position:relative;}
.slides_container a{width:570px;height:270px;display:block;}
#slides .next{left:585px;}
#content{float:left;width:350px;font-size:1.3em;margin-right:20px;font-size:1.3em;}
#content h1{margin:0 0 0 -4px;}
.pagination{margin:26px auto 0;width:100px;}
.pagination li{float:left;margin:0 1px;}
.pagination li a{display:block;width:12px;height:0;padding-top:12px;background-image:url(http://img03.taobaocdn.com/tps/i3/T1qKB3XxXXXXaswug.-12-25.png);background-position:0 0;float:left;overflow:hidden;}
.pagination li.current a{background-position:0 -12px;}
a:link.download,a:visited.download{margin-left:-5px;display:block;width:200px;height:0;padding-top:55px;overflow:hidden;background-image:url(btn-download.png);background-position:0 0;}
a:hover.download,a:active.download{background-position:0 -55px;}
#instructions{float:left;width:580px;font-size:1.3em;}
#footer{float:left;width:580px;margin-top:9px;margin-bottom:9px;padding:4.5px 0 18px;border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;}
#footer p{margin:4.5px 0;font-size:1.0em;}
pre{margin:0 0 18px;padding:.5em;font:12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;text-shadow:none;clear:both;}
ul.examples{list-style:disc;margin:-9px 0 9px 14px;}
p{margin:9px 0;}
em{font-style:italic;}
a:link,a:visited{color:#599100;text-decoration:none;}
a:hover,a:active{color:#599100;text-decoration:underline;}
h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1;margin:0 0 .9em;letter-spacing:-0.5px;color:#0e152b;}
h1{font-size:1.8em;line-height:1.25;margin:0 0 .4em;padding:.22em 0 0;}
h2{font-size:1.3em;line-height:1.25;margin:0 0 .4em;padding:.22em 0 0;}
h3{font-size:1.3em;padding:.22em 0 0;margin:0;}
h4,h5,h6{font-size:1.1em;padding:.44em 0 4.5px;margin:0;}
h4.example{float:left;}
p{margin:0 0 .9em;}
small{display:block;font-size:.9em;margin:0 0 .9em;}
.expand{margin:0 0 9px;position:relative;}
.expand pre{margin:9px 0;}
.expand h4{font-size:1.1em;}
.expand .content{display:none;overflow:hidden;}
.expand .content .inner{margin:.56em 0;display:none;}
.expand p{font-size:.9em;margin:0;}
.expand small{color:#838383;}
#content .expand small{position:static;}
.expand h5{font-size:1.1em;padding:.88em 0 0;}
strong{font-weight:bold;}
.hidden{display:none;}
.DlHighlight{margin-left:10px;background-color:transparent;border-left:1px solid #ccc;padding-top:0;padding-bottom:0;}

CSS代码(zzsc.css):

body{background:white;}
#example{margin-left:auto;margin-right:auto;width:600px;}
.tab-content{height:270px;}
.tab-pannel{height:270px;position:relative;}
.tab-pannel .tbg{width:100%;height:100%;}
.pr{position:relative;}
.pa{position:absolute;}
.sublayer1-1{top:-62px;left:62px;width:171px;}
.sublayer1-2{top:-78px;left:384px;width:253px;}
.sublayer1-3{top:145px;left:237px;font-size:40px;}
.sublayer1-4{top:201px;font-size:21px;left:189px;color:green;}
.sublayer1-5{top:229px;font-size:19px;left:232px;color:olive;display:block;width:223px;}
.sublayer2-1{top:41px;left:56px;width:206px;}
.sublayer2-2{top:50px;left:310px;height:39px;}
.sublayer2-3{top:95px;left:320px;height:37px;}
.sublayer2-4{top:146px;left:342px;height:28px;}
.sublayer3-1{width:171px;top:117px;left:214px;}
.sublayer3-2{top:65px;left:277px;width:235px;}
.sublayer3-3{top:142px;left:336px;width:193px;}
.sublayer3-4{top:25px;left:274px;width:100px;}
.sublayer3-5{top:99px;left:17px;}
.sublayer3-6{top:154px;left:17px;}
.sublayer3-7{top:185px;left:17px;}
.pn1{text-shadow:0 1px 0 rgba(255,255,255,.8);-webkit-font-smoothing:subpixel-antialiased;}
.pn3{}
.pn3 h2{background-color:#036d99;padding-left:5px;padding-right:5px;font-family:tahoma;font-size:17px;color:white;}
.pagination{width:45px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
1.28 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
1.28 MB
立即下载
叶薇
了解
打赏作者 鼓励作者
Html 滑动滚动特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章