小清新的jQuery ck-slide 图片轮播

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小清新的jQuery ck-slide 图片轮播相关的知识,希望对你有一定的参考价值。

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

在线实例

默认(淡入淡出) 左右滚动 自动播放

使用方法

<div class="ck-slide"> 
    <ul class="ck-slide-wrapper"> 
        <li> 
            <a href="#"><img src="images/1.jpg" ></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>
$(‘.ck-slide‘).ckSlide();

  

参数详解

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

 

以上是关于小清新的jQuery ck-slide 图片轮播的主要内容,如果未能解决你的问题,请参考以下文章

jQuery轮播图鼠标移入停止,移出播放,点击小横条切换图片

jquery写3D图片轮播效果

jQuery图片轮播利用构造函数和原型创建对象以实现继承

jQuery插件之路——轮播

使用ViewPager实现图片轮播

用jQuery实现优酷首页轮播图