slick淡入淡出的焦点图

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

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

slick有以下特点：

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

HTML

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

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