当前位置: 首页 > 工具软件 > ck_slide > 使用案例 >

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

白弘伟
2023-12-01

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

在线实例

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

使用方法

  1. <div class="ck-slide"> 
  2.     <ul class="ck-slide-wrapper"> 
  3.         <li> 
  4.             <a href="#"><img src="images/1.jpg" alt=""></a> 
  5.         </li> 
  6.         ...
  7.     </ul> 
  8.  
  9.     <a href="javascript:" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:" class="ctrl-slide ck-next">下一张</a> 
  10.      
  11.     <div class="ck-slidebox"> 
  12.         <div class="slideWrap"> 
  13.             <ul class="dot-wrap"> 
  14.                 <li class="current"><em>1</em></li> 
  15.                 <li><em>2</em></li> 
  16.                 <li><em>3</em></li> 
  17.                 <li><em>4</em></li> 
  18.                 <li><em>5</em></li> 
  19.             </ul> 
  20.         </div> 
  21.     </div> 
  22. </div>
  23. $('.ck-slide').ckSlide();
复制

参数详解

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

 

 类似资料: