ck_slide 是一款小清新的jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,基本功能可以满足。它支持淡入淡出/左右滚动、箭头/圆点控制、自动播放。
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 |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791