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

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

阅读更多
    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
分享到:
评论

相关推荐

    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库,为实现这种效果提供了丰富的工具和插件。本...

Global site tag (gtag.js) - Google Analytics