ck-slide淡入淡出效果的图片轮播插件

收藏

ck_slide 是一款小清新的jQuery 幻灯片插件，它非常小巧，压缩后仅 3KB，基本功能可以满足。它支持淡入淡出/左右滚动、箭头/圆点控制、自动播放。

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

查看演示

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

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

HTML

<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a href="http://www.js.com/"><img src="images/1.jpg" alt=""></a>
        </li>
        <li style="display:none">
            <a href="http://www.js.com"><img src="images/2.jpg" alt=""></a>
        </li>
        <li style="display:none">
            <a href="javascript:"><img src="images/3.jpg" alt=""></a>
        </li>
        <li style="display:none">
            <a href="javascript:"><img src="images/4.jpg" alt=""></a>
        </li>
        <li style="display:none">
            <a href="javascript:"><img src="images/5.jpg" alt=""></a>
        </li>
    </ul>

    <a href="javascript:" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:" class="ctrl-slide ck-next">下一张</a>
    
    <div class="ck-slidebox">
        <div class="slideWrap">
            <ul class="dot-wrap">
                <li class="current"><em>1</em></li>
                <li><em>2</em></li>
                <li><em>3</em></li>
                <li><em>4</em></li>
                <li><em>5</em></li>
            </ul>
        </div>
    </div>
</div>

引入jQuery库和ck-slide相关插件

<link rel="stylesheet" href="css/slide.css">

<script src="js/jquery.js"></script>
<script src="js/slide.js"></script>

jQuery

$('.ck-slide').ckSlide();

ck-slide相关API