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>


效果图请看附件

你可能感兴趣的:(js,jquery,jCarousel)