`
ti8989
  • 浏览: 26307 次
文章分类
社区版块
存档分类
最新评论

jQuery内容滚动幻灯片插件 - Diapo

阅读更多
本文转自给力技术:http://site518.net/jquery-content-slider-diapo/
    Diapo是一个简单且易于使用的内容滚动幻灯片插件,让你能够在网页中展示很酷的动画切换效果。此插件所能展示的内容不仅仅是图片,甚至可以是视频,其他任意你能想到的网页元素都能显示在其上。
  插件的滚动控制方式也有自动播放、前后按钮、缩略图导航这3种方式。除此之外,此插件效果也支持在移动设备中浏览,可以通过参数设置是否开启这一选项。
如何使用

  首先要加载jQuery库、Diapo插件,还要用到jQuery Mobile、Easing和HoverIntent插件,以及相关的CSS样式文件

<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css'>
<script src="jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script>
<script type='text/javascript' src='jquery.hoverIntent.js'></script>
<script type='text/javascript' src='diapo.js'></script>

  之后在页面中添加要展示的内容

<div>
    <div data-thumb="缩略图.jpg">
      <img src="原图.jpg">
      <div class="caption elemHover fromLeft">
        这里设置副标题
      </div>
    </div>
    ...省略
</div>

  最后初始化插件,欣赏效果吧~~~

$('.pix_diapo').diapo();

演示
分享到:
评论

相关推荐

    jQuery图片轮播幻灯片插件Diapo.zip

    《jQuery图片轮播幻灯片插件Diapo详解》 在网页设计中,图片轮播幻灯片是一种常见的视觉效果,能够吸引用户注意力并展示丰富的内容。jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能和易用性,使得创建...

    jQuery图片轮播幻灯片插件Diapo

    jQuery图片轮播幻灯片插件Diapo是前端开发中常用的一种组件,它极大地丰富了网页的动态展示效果,尤其适用于产品展示、图片集锦或新闻滚动等场景。这款插件以其直观、易于操作和高度可定制化的特点,深受开发者喜爱...

    一款支持手持设备的内容型幻灯片.zip

    Diapo是一个简单且易于使用的内容滚动幻灯片插件,让你能够在网页中展示很酷的动画切换效果。此插件所能展示的内容不仅仅是图片,甚至可以是视频,其他任意你能想到的网页元素都能显示在其上。

    jquery mobile 插件

    `diapo.1.0.4.zip` 可能是Diapo插件,这是一个用于创建幻灯片展示的jQuery Mobile插件。Diapo允许开发者轻松地创建具有动画过渡效果的幻灯片,可以自定义导航按钮、自动播放、定时器等功能,为用户呈现美观且动态的...

    40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

    - Diapo 插件:一款免费开源的jQuery图片幻灯片展示插件,适用于各种商业用途,可以用于首页和多张照片切换展示。 - Craftyslide 插件:基于jQuery的照片幻灯片展示插件,界面简洁,易于整合到网页项目中。 - ...

    formation:包含所有课程的仓库

    此回购包含所有课程及其示例代码,幻灯片和图像。 树状结构 . +-- README.md +-- 1_html | +-- assets # Toutes les images/schemas/cheatsheets/audio | +-- code # Tous les snippets de code ayant servi d'...

    js菜鸟笔记之图像幻灯动画_ekom.cn

    - `#slider.diapo`:定义幻灯片元素的透明度和可见性。 ### 四、JavaScript实现 #### 1. DOM操作 - 获取页面中的关键元素,如幻灯片容器和各个幻灯片。 - 定义`getElementsByClass`函数,用于获取指定类名的DOM...

    最新的10款jQuery内容滑块插件分享

    由于文章中提到了10款具体的jQuery内容滑块插件,但是具体内容和详细信息并没有在这段描述中给出,所以我会根据插件的名称进行扩展,说明这些插件可能涉及的技术点和应用场景,从而提供相关的知识点。 首先,jQuery...

    Polytechnike:哈希码2020

    在不起眼的军营中,幻灯片放映将在diapoprécédent上进行。 服从373241分,等等24分。 解决方案gloutonnecomplète 在cherche la meilleure diapoàfoutreàdroite dans les N suivantes。 将N = 10倒在518747点...

    图片动态切换技术

    - **滚动条样式**:`#imageFlow.scrollbar`和相关子元素定义了滚动条的样式,如位置、尺寸、颜色等,用于控制图片切换的进度。 - **文本样式**:`#imageFlow.text`、`.title`和`.legend`等选择器定义了文字显示的...

Global site tag (gtag.js) - Google Analytics