slick淡入淡出的焦点图

收藏

jQuery响应式手机端移动端幻灯片图片切换特效插件slick，功能非常强大，支持左右按钮切换、圆点切换、自定义切换数量，自定义切换速度、图片预加载和自动播放定义

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

slick有以下特点：

• 在一个页面上可以有多个演示
• 光滑的预取下一张幻灯片。
• 快速跳过:如果用户快速点击下一步,说,5次,中间幻灯片不加载
• 幻灯片是没有改变,直到它完全加载。
• 幻灯片不是删除但是一直隐藏在DOM中。
• 光滑的支持主题表现的球员。

HTML

首先我们在.slick放置多个div包含图片的列表

<div class="slick">
    <div><a href="http://www.erdangjiade.com"><img src="images/7.jpg" alt="2014CJ绝对领域福利第二弹"><span>2014CJ绝对领域福利第二弹</span></a></div>
    <div><a href="http://www.erdangjiade.com"><img src="images/8.jpg" alt="白女侠无下限“摸”遍全场"><span>白女侠无下限“摸”遍全场</span></a></div>
    ......
</div>

引入jQuery和slick插件

<script type="text/javascript" src="jquery.js"></script> 
<script src="js/slick.js"></script>

调用slick插件

$(function() {
        $('.slick').slick({
            dots: true, //显示项目导航
            fade: true, //淡入淡出
            autoplay: true  //自动播放
        });
});