`
zxt1985
  • 浏览: 21154 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery.jcarousel设置图片左右浮动效果

jcarouseljqueryjs 
阅读更多
    jquery.jcarousel是一个很强大的图片滚动插件，关于它的使用和配置，我就不重复说明了，因为你一百度或谷歌就能搜出一大堆的说明文档，并且它自带的api说明也很详细。现在我只想和大家一起分享如何修改它的左右浮动效果，它默认的float是left，有的时候我们需要右对齐，这时该怎么办呢？其实不用修改它的js代码，只需修改skin.css和你的页面文件即可。

修改skin.css文件：（可选，视自己具体情况而定） 
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: -38px;//左箭头：此处把0px修改成你自己想要的值，就能把箭头图标往左边移    
    background-image: url(default/img/right-btn.png);
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: -32px;//右箭头：此处把0px修改成你自己想要的值，就能把箭头图标往右边移    
    right: auto;
    background-image: url(default/img/left-btn.png);
}

修改你的页面文件：（必选） 
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"><!-- 加上这个dir="rtl"就能使整个图片的float为right浮动了，不加就为left浮动了，是不是很简单，你可以试试，嘿嘿 -->
<head>
...
</head>
<body>
...
</body>
</html>


效果图请看附件
  • 描述: 这是右浮动
  • 大小: 12.5 KB
  • 描述: 这是左浮动
  • 大小: 12.4 KB
分享到：
| tomcat集群和负载均衡的实现（session同步 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    "Jquery.jqzoom + jcarousel 实现图片滚动和局部图片放大镜效果"是一个典型的应用场景，它结合了两个强大的jQuery插件——jqZoom和jCarousel，以实现动态的图片浏览体验。 jqZoom是一款基于jQuery的图片放大镜插件...

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

    在下载的压缩包 `Jquery.jqueryzoom+jcarousel+实现图片滚动和局部图片放大镜效果.rar` 中，应包含以下内容： - `jquery.js` 或 `jquery.min.js`：基础的 jQuery 库文件。 - `jcarousel.js` 或 `jcarousel.min.js`：...

    jquery.jcarousel.pack.js

    Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还...jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。

    jQuery轮播图插件jCarousel

    总结，jCarousel作为一款强大的jQuery轮播图插件，不仅提供了丰富的预设效果，还允许开发者通过自定义选项和API实现更多个性化功能。无论是新手还是经验丰富的前端开发人员，都能从中受益，轻松创建出令人满意的轮播...

    jquery插件jcarousel制作滚动效果

    jCarousel 是一款基于jQuery的插件，专门用于创建各种类型的滚动效果，无论是图片展示还是文本滚动，都能轻松实现。 ## 1. jCarousel 的核心功能 jCarousel 提供了灵活的配置选项和丰富的API接口，使得开发者可以...

    jcarousel点击图片滚动

    &lt;link rel="stylesheet" href="path/to/jquery.jcarousel.min.css"&gt; &lt;!-- 引入 jCarousel JS --&gt; &lt;script src="path/to/jquery.jcarousel.min.js"&gt; ``` ### 2. 创建 jCarousel 容器 在 HTML 结构中，我们需要一个...

    jquery插件 jcarousel包以及使用的小例子

    - **jCarousel.css**: 这个CSS文件用于设置轮播图的基本样式，包括滑动容器、导航箭头、分页器等元素的外观。 - **图片或内容的HTML结构**: 需要按照jCarousel规定的HTML结构来组织轮播项，通常包括一个包裹容器和多...

    jQuery插件_jcarousel(用于图片滚动)

    `jcarousel`是一个非常流行的jQuery插件，专为创建功能丰富的图片轮播、滑动展示和旋转木马效果而设计。它提供了高度自定义的选项，使开发者能够轻松地在网站上添加交互式的图片滚动效果。这个插件适用于那些希望在...

    横向无缝的图片滚动,jQuery jcarousel实例.rar

    横向无缝的图片滚动，两端带左右控制按钮，需要鼠标点击按钮才会滚动，点一下滚动一下，这是Jquery jcarousel插件应用实用例子，演示文档虽然是HTML格式，但由代码来看，在ASP/PHP/ASP.NET中使用也很方便，而且图片...

    C# ASP.NET jQuery - jCarousel控件图片动态浏览

    在页面加载完成后，通过jQuery选择器找到包含图片的ul元素，并调用jCarousel的初始化方法，设置所需的选项，如自动播放、循环滚动、速度等。例如： ```javascript $(document).ready(function() { $('#myCarousel'...

    jQuery滚动切换传送插件jCarousel使用简介

    &lt;script src="jquery.jcarousel.min.js"&gt; ``` **2. HTML结构** jCarousel需要一个特定的HTML结构来工作。一般包括一个容器元素（class="jcarousel"），一个ul列表（class="jcarousel-skin-你的皮肤名称"）和li元素...

    Jcarousel jQuery 多风格图片滚动插件及示例

    内容索引:脚本资源,jQuery,图片滚动,jQuery插件　Jcarousel 是一款基于jQuery的多风格图片滚动插件，它可以控制成组的图片滚动，也可以设置滚动方向，横向或竖向，设置图片数量，两端带有多种风格的控制按钮。...

    jquery滚动JS

    jquery.jcarousel.pack.js

    超级漂亮的jQuery焦点图广告轮播特效.pdf

    &lt;script type="text/javascript" src="dist/jquery.jcarousel.min.js"&gt; ``` 然后，设置HTML结构，通常包含一个容器（`.jcarousel-wrapper`），轮播元素（如图片列表`&lt;ul&gt;`）和控制按钮（`.jcarousel-control-prev`、...

    Jquery jcarousel插件应用实用：横向无缝图片滚动

    内容索引:脚本资源,jQuery,图片滚动,jcarousel,Jquery插件　Jquery jcarousel插件应用实用：横向无缝的图片滚动，两端带左右控制按钮，需要鼠标点击按钮才会滚动，点一下滚动一下，演示文档虽然是HTML格式，但由代码...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...

    jQuery图片点击切换插件jCarousel.zip

    总结起来，jQuery图片点击切换插件jCarousel以其强大的功能和易于使用的特性，成为了前端开发中的热门选择。它不仅简化了图片轮播的实现过程，还为开发者提供了广阔的创新空间。通过深入理解和灵活运用jCarousel，...

    E_jquery图片滚动切换插件 jCarousel Lite

    **jQuery图片滚动切换插件——jCarousel Lite详解** 在网页设计中，图片的展示方式多种多样，其中一种常见且吸引用户注意力的方式就是图片滚动切换效果。`jCarousel Lite`是基于jQuery的一款轻量级的图片轮播插件，...

    jquery图片滚动特效(较常用)

    **jQuery图片滚动特效详解** 在Web开发中，动态图片展示是一种常见的需求，它可以吸引用户的注意力，增加网站的交互性。jQuery作为一个轻量级、功能强大的JavaScript库，为实现这种效果提供了丰富的工具和插件。本...

Magicbox
Global site tag (gtag.js) - Google Analytics