slick淡入淡出的焦点图

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

淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图，在此特别感谢您对我们的支持与厚爱！

slick有以下特点：

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

HTML

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

<div class="slick">
    <div><a href="http://www.sucaiq.com"><img src="images/7.jpg" alt="2014CJ绝对领域福利第二弹"><span>2014CJ绝对领域福利第二弹</span></a></div>
    <div><a href="http://www.sucaiq.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  //自动播放
        });
});