素材牛

jQuery漂亮的大图切换带文字动态效果

 所属分类:网页特效-焦点图/幻灯片

 浏览:782次-  下载:6次-  评论:7次-  发布时间:2018-05-19
jQuery漂亮的大图切换带文字动态效果兼容IE9
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:无意间发现的,分享出来给各位同学看看

详细介绍

使用方法:

引用只需要引用一个css样式表,一个js文件

jquery是一般网页默认都引用的

<link rel="stylesheet" href="resources/css/YlSidler.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="resources/js/jquery.Yl.Slide.min.js"></script>

html部分

<div class="sun_banner">
    <div class="Yl-container"></div>   
</div>
sun_banner默认是1920*550 可以从样式表中修改

调用方法

$(function(){   
    $('.Yl-container').YlSlide({
        wrapper:'.Yl-wrapper',
        slideClass:'.Yl-slide',
        stylePrefix:'.Yl-',
        slideLength:3,
        pages:true,
        pagination:'.Yl-pagination',
        pagingSelect:'.Yl-pagination-bullet-active',
        autoplay:25000,             
        imgTemplate:{
            0:['<div class="Yl-img0"></div>'],
            1:['<div class="Yl-img1"></div>'],
            2:['<div class="Yl-img2"></div>']
        },
        fontTemplate:{
            0:['<div class="Yl-font0">一人之下</div>','<div class="Yl-font1">术之尽头,?体源流</div>','<div class="Yl-font2">国漫崛起</div>'],
            1:['<div class="Yl-font0">画江湖</div>','<div class="Yl-font1">不良人、侠岚、换世门生、灵主</div>','<div class="Yl-font2">国漫崛起</div>'],
            2:['<div class="Yl-font0">镇魂街</div>','<div class="Yl-font1">末将于禁 愿为曹家世代赴汤蹈火</div>','<div class="Yl-font2">国漫崛起</div>']
        },
        fontAnimationMode:{
            0:['fadeInUp','fadeInUp','slideInLeft'],
            1:['fadeInUp','fadeInUp','slideInLeft'],
            2:['fadeInUp','fadeInUp','slideInLeft']
        },
        customTemplate:{
            0:['<div class="Yl-Button"><a href="javascript:void(0);">查看详情</a></div>'],
            1:['<div class="Yl-Button"><a href="javascript:void(0);">查看详情</a></div>'],
            2:['<div class="Yl-Button"><a href="javascript:void(0);">查看详情</a></div>']
        },
        callback:function(e){
            //整个dom加载完成后的回调函数、切换动画前的回调                      
        },
        before: function(e) {
            //页面切换前的回调函数
        }, 
        after: function(e) {                      
            //页面切换完成后的回调函数
             
        }
    }); 
});

文件目录结构

  • ┝ index.html
  • resources
    • css
      • ┝ YlSidler.css
    • images
      • sidler
        • ┝ layer1.png
        • ┝ layer2.png
        • ┝ layer3.png
    • js
      • ┝ jquery.js
      • ┝ jquery.Yl.Slide.min.js

讨论这个素材(7)回答他人问题或分享使用心得会奖励牛币

迷弯转路
2018年05月27日

感觉下载好贵啊,积分真是多

云淡风轻:哥~5个牛币也多啊?!
回复
xiaoxiaocong
2018年05月28日

不错不错

回复
2823779741
2018年05月30日

还可以

回复
等待123456
2018年07月31日

感谢分享

回复
18301163357
2018年08月08日

收藏4

回复
3541555849
2018年12月09日

上下 的方式 学习了

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:6
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证