`

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

阅读更多

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

 

2
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jquery多过度风格的焦点图幻灯片代码插件ck-slide下载.zip

    ck-slide是一款专门用于创建焦点图和幻灯片展示的JavaScript插件,其核心功能在于通过jQuery库实现各种动态过渡效果,让图片切换更为流畅自然。这个插件不仅易于使用,而且具有高度自定义性,开发者可以根据项目需求...

    超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31

    超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31

    jquery实现多个过度风格的焦点图幻灯片插件ck-slide源码.zip

    ck-slide是专为jQuery设计的一个幻灯片插件,其核心功能是展示一组图片或内容,通过平滑的过渡效果进行自动或手动切换,为用户提供视觉上的吸引力。该插件支持多种过渡样式,如淡入淡出、滑动等,能够满足不同场景下...

    jquery幻灯片特效2010-7-20jquery幻灯片特效2010-7-20

    《jQuery幻灯片特效2010-7-20详解》 在Web开发领域,jQuery库因其简洁的API和强大的功能,深受开发者喜爱。其中,幻灯片效果是jQuery应用的一大亮点,它能为网站增添动态展示效果,提升用户体验。本篇文章将深入...

    jQuery途牛首页定时幻灯片轮播效果

    "jQuery途牛首页定时幻灯片轮播效果"是一个典型的利用JavaScript库jQuery实现的动态展示功能,主要目标是模拟实际生活中幻灯片的切换,让用户在浏览网页时能享受到平滑、自动的图片或内容滚动体验。 首先,jQuery是...

    带文字说明的jQuery幻灯片自动轮播代码.zip

    总的来说,这个"带文字说明的jQuery幻灯片自动轮播代码"资源将演示如何结合HTML、CSS和jQuery实现一个功能完备的幻灯片轮播组件,包括图片的自动切换、文字说明的显示以及用户交互功能。通过学习这个实例,开发者...

    Jquery图片轮播幻灯片效果实现左右滚动图片切换代码

    在网页设计中,jQuery 图片轮播幻灯片效果是一种常见的功能,用于展示一组图片或内容,通过动态的左右滚动来吸引用户注意力并提供良好的用户体验。这个效果的实现基于 jQuery JavaScript 库,它简化了 DOM 操作、...

    兼容IE8的jQuery宽屏幻灯片轮播插件.rar

    兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的jQuery宽屏幻灯片轮播插件.rar 兼容IE8的...

    jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码

    jQuery是一个轻量级的JavaScript库,提供了丰富的API和便捷的语法,使得创建具有自动轮播和暂停功能的图片幻灯片变得简单易行。本文将深入探讨如何利用jQuery实现这一功能。 首先,我们需要引入jQuery库。确保在...

    jquery幻灯片图片轮播带进度条幻灯片图片切换

    "jquery幻灯片图片轮播带进度条幻灯片图片切换"是jQuery实现的一种常见功能,通常用于网站的首页或者产品展示区,能够吸引用户的注意力并提供良好的用户体验。下面我们将深入探讨这一主题。 首先,jQuery幻灯片图片...

    jquery幻灯片插件大小图片切换,兼容性好支持图片轮播切换

    在本话题中,我们将探讨“jQuery幻灯片插件”,这是一种用于实现图片轮播效果的工具,特别适用于创建引人入胜的网页视觉体验。 标题中的“大小图片切换”意味着该插件能够适应不同尺寸的图片,自动调整它们以适应...

    jQuery+html5实现的3D动态切换焦点轮播幻灯片

    在这个3D轮播幻灯片中,jQuery主要负责处理用户的交互,如点击按钮或自动播放时的切换效果,以及在切换过程中添加平滑过渡动画,使用户体验更加流畅。 HTML5是下一代超文本标记语言,引入了许多新特性,如语义化...

    jquery 幻灯片 大全

    jQuery 幻灯片插件是网页设计中常用的一种动态效果工具,用于创建吸引人的滑动展示,例如图片轮播、内容滚动或者滑动导航。在本篇中,我们将深入探讨jQuery幻灯片的原理、常见插件以及如何利用它们来增强网站的用户...

    自动滚动的jQuery幻灯片代码

    在网页设计中,jQuery幻灯片是一种常见的动态展示内容的方式,尤其适用于展示产品图片、新闻更新或任何需要轮播的视觉元素。标题“自动滚动的jQuery幻灯片代码”所指的就是利用jQuery库实现的自动播放图片轮播功能。...

    jQuery幻灯片插件带投影的图片叠加切换幻灯片轮播

    "jQuery幻灯片插件带投影的图片叠加切换幻灯片轮播"指的是一个特定的jQuery实现,它不仅包含基本的幻灯片功能,还增加了投影效果和图片叠加的切换方式,使得视觉呈现更加丰富和立体。 首先,jQuery是JavaScript的一...

    jQuery响应式幻灯片插件-iView.rar

    jQuery响应式幻灯片插件-iView.rarjQuery响应式幻灯片插件-iView.rarjQuery响应式幻灯片插件-iView.rarjQuery响应式幻灯片插件-iView.rarjQuery响应式幻灯片插件-iView.rarjQuery响应式幻灯片插件-iView.rar

    jQuery图片轮播幻灯片 jQuery图片轮播幻灯片网页特效.zip

    在网页设计中,图片轮播幻灯片是一种常见的交互元素,用于展示一组图片或内容,以吸引用户注意力并提供良好的用户体验。"jQuery图片轮播幻灯片"是基于JavaScript库jQuery实现的一种动态效果,它结合了CSS样式和HTML5...

    jQuery幻灯片Slide隐藏效果

    jQuery幻灯片Slide隐藏效果是一种常见的网页动态展示技术,它为用户提供了一种优雅的方式来展示内容,如图片、文字或任何其他HTML元素。这种效果通常应用于网站的首页、产品展示、新闻滚动等场景,以吸引用户的注意...

    带文字说明的jQuery幻灯片自动轮播代码

    本资源提供了一款带有文字说明的jQuery幻灯片轮播代码,它结合了视觉效果与信息传递,适用于网站的首页、产品展示或者新闻更新等区域。 首先,我们来看"jQuery",这是一个轻量级的JavaScript库,简化了HTML文档遍历...

Global site tag (gtag.js) - Google Analytics