`

jQuery图像列表插件 jCarousel

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
    wrap: 'circular'
    });
});

</script>

</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

  <h3>Circular carousel</h3>
  <p>
    This example shows a simple circular carousel.
  </p>

  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

</div>
</body>
</html>
  • 大小: 52.2 KB
分享到:
评论

相关推荐

    Jquery.jqzoom + jcarousel 实现图片滚动和局部图片放大镜效果

    3. 使用jQuery选择器选取ul列表,并调用jCarousel方法初始化插件,配置如自动滚动速度、是否循环等参数。 例如: ```javascript $(document).ready(function() { $('#mycarousel').jcarousel({ auto: 3, // 自动...

    Jquery.jqueryzoom+jcarousel+实现图片滚动和局部图片放大镜效果

    在这个项目中,`jQuery` 被用来实现两种关键功能:图片滚动(通过 `jcarousel` 插件)和局部图片放大镜效果(通过 `jqueryzoom` 插件)。下面我们将详细介绍这两个功能及其背后的原理。 1. **`jcarousel` 插件**:`...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于...

    jquery 动态示例

    93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品...

    100多个JQuery效果示例(实例)div+css+javascrpit

    93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与...93. 基于jQuery的横向无缝图片滚动插件jcarousel **** …… …… …… 很多很多

    jcarouselLazyLoading:jcarousel的插件https

    要使用该插件,请包括jquery,jcarousel和jcarouselLazyLoading将源文件加载到HTML文档中: &lt; script type =" text/javascript " src =" js/jquery.min.js " &gt; &lt;/ script &gt; &lt; script type =" tex

    JQuery&CSS;&CSS;+DIV实例大全.rar

    49.jquery相册播放器插件实现无序图片列表转换成有序并播放 50.jQuery移动网页背景图浮云流水特效 51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    jqzoom + jcarousel图片展示

    jCarousel则是一个灵活的jQuery插件,用于创建滚动或轮播图片列表。"jquery.jcarousel.css"包含了jCarousel的样式定义,包括滑块的外观、导航按钮、自动播放指示器等。"jqzoom+jcarousel.html"这个文件很可能是...

    jcarousel图片效果

    这个插件能够实现图片的向上、向下滚动,以及其他各种动态展示效果,使得网站的图像展示更加生动活泼。 ### 一、Jcarousel基本概念 1. **什么是Jcarousel?** Jcarousel是一个开源的JavaScript库,专门用于创建...

    jcarousel_脚本实例_源码.zip

    **jCarousel** 是一个流行的JavaScript库,用于创建可滚动、响应式的图像或内容滑块。这个压缩包"jcarousel_脚本实例_源码.zip"包含的资源是开发者用来理解和应用jCarousel脚本的实例代码和源代码。下面将详细探讨...

    基于jquery的特效

    jQuery的许多插件如jCarousel或Slick可以帮助开发者轻松创建这种效果,支持触摸滑动,自动播放,多方向滑动等功能。通过CSS3的transform属性和transition属性,可以实现平滑的过渡效果。 “导航级联”是网页导航...

    jQuery1.10.3_API中文手册

    jQuery 社区提供了大量的插件,如用于图像轮播的 jCarousel,表单验证的 validate,以及响应式布局的 responsiveSlides 等。这些插件进一步扩展了jQuery的功能。 **9. 版本更新(Version Updates)** jQuery 1.10.3...

    jqury多种滚动十分好用

    `jCarousel`是基于jQuery的一个优秀插件,专门用于创建高质量的轮播和滚动效果。它提供了丰富的自定义选项,可以轻松地调整滑动速度、方向、自动播放、导航箭头和指示器等多种特性。`jCarousel`的兼容性极佳,可以在...

    网站前端网页源码模板 (540).zip

    2. **jquery.jcarousel.css**: 这个文件涉及到jQuery的轮播插件样式。jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理和动画。jCarousel是jQuery的一个组件,用于创建可滑动的图片或内容轮播,常用于网站...

    scripts.zip_JavaScript/JQuery_Java_

    4. **jquery.jcarousel.min.js**:这是jQuery JCarousel插件的压缩版,用于创建响应式的图片或内容滚动列表,可以创建水平或垂直滚动的图像滑块。 5. **custom-form-elements.js**:这可能是一个自定义表单元素的...

    多方向滚动的焦点图

    3. **插件使用**:jQuery有许多现成的焦点图插件,如`jCarousel`、`bxSlider`等,它们提供了丰富的选项和API,可以直接应用到项目中,快速实现多方向滚动效果。理解这些插件的工作原理和配置选项对于定制效果至关...

    精品漂亮大气的食品网站模板下载_棕色精品漂亮大气食品西餐食物企业幻灯精致汉堡html.rar

    1. prettyPhoto.css:这是一款流行的jQuery插件的CSS样式表,用于实现美观的图片弹出框效果,用户点击图片后,图片会在一个半透明的层上全屏显示,提供更好的图片浏览体验。 2. style.css、jCarousel.css、ie.css、...

    javascript手册javascript手册

    这个名为"jcarousel"的压缩包可能包含一个JavaScript轮播图插件的源代码或文档,它可能涉及到DOM操作、事件处理、CSS动画、图片加载优化等相关知识点。通过学习这个插件,你可以了解到如何实现一个高效、流畅的图像...

Global site tag (gtag.js) - Google Analytics