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

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

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

淘建站为您提供更多_图片代码_广告_按钮控制_幻灯片,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 248 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:图片代码 > 广告 难易程度:初级

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

参数 描述 默认值
autoPlay 自动播放 false
dir 可选 ‘x’,即水平滚动,非 ‘x’ 为淡入淡出 -
isAnimate 是否开启动画效果 false

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/187.html
ck-slide淡入淡出效果的图片轮播插件 希望对你有帮助,感谢您的支持!
  • Orbit演示jQuery三种不同的幻灯片效果

    Orbit演示jQuery三种不同的幻灯片效果

  • allinone rotator演示40种不同的焦点图轮播

    allinone rotator演示40种不同的焦点图轮播

  • js+flash制作迷你型幻灯片效果

    js+flash制作迷你型幻灯片效果

  • superslide仿京东首页幻灯片效果

    superslide仿京东首页幻灯片效果

  • jQuery由慢突然变快的幻灯片效果

    jQuery由慢突然变快的幻灯片效果

  • jQuery淡入淡出带标题的焦点图轮播

    jQuery淡入淡出带标题的焦点图轮播

  • jQueryt+slideBox演示4种图片轮播效果

    jQueryt+slideBox演示4种图片轮播效果

  • slick响应式轮播焦点图

    slick响应式轮播焦点图

  • Smoothslides会移动的焦点轮播图

    Smoothslides会移动的焦点轮播图

  • jQuery手机wap幻灯片播放器

    jQuery手机wap幻灯片播放器

  • jQuery手机幻灯片切换放大

    jQuery手机幻灯片切换放大

  • jQuery个人介绍幻灯片

    jQuery个人介绍幻灯片

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2