- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在四处寻找这个,但找不到有关如何做的信息。我有一个网站,我正在尝试在页面上实现 3 个不同的 j 轮播。
问题是,当我点击下一步按钮时,它们都会移动。我已经更改了按钮名称并将更改应用到 css 和 jquery,但它似乎不起作用。有人知道怎么做吗?
$(function(){
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 5,
speed: 1000,
})
})
#carousel img{height:200px;width:200px;padding:5px; margin: 0 5px; border: 5px solid #CCC; }
.next {float:right;background:#069;border:0px;}
.prev {float:left;background:#069;border:0px;}
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slider-carousel</title>
<script type="text/javascript" src="scripts/js/jquery.js"></script>
<script type="text/javascript" src="scripts/js/jcarousel.js"></script>
</head>
<body>
<div id="carousel">
<div class="carousel">
<ul>
<li><img src="assets/adds/add1.png" alt="" /></li>
<li><img src="assets/adds/add2.png" alt="" /></li>
<li><img src="assets/adds/add3.png" alt="" /></li>
<li><img src="assets/adds/add4.png" alt="" /></li>
<li><img src="assets/adds/add5.png" alt="" /></li>
<li><img src="assets/adds/add6.png" alt="" /></li>
<li><img src="assets/adds/add1.png" alt="" /></li>
<li><img src="assets/adds/add2.png" alt="" /></li>
<li><img src="assets/adds/add3.png" alt="" /></li>
<li><img src="assets/adds/add4.png" alt="" /></li>
</ul>
<button class="prev">Back</button><button class="next">Next</button>
</div>
</div>
</body>
</html>
我只以一个轮播为例,还有来自google和javascript网站的外部jquery文件。
最佳答案
您必须调用插件函数两次并以不同方式标识按钮(也许您应该在其上使用 id)。
$(function(){
$(".carousel1").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 5,
speed: 1000,
});
$(".carousel2").jCarouselLite({
btnNext: ".next2",
btnPrev: ".prev2",
visible: 5,
speed: 1000,
})
})
这是一个 fiddle :http://jsfiddle.net/c71fkj15/
希望对您有所帮助。
ps:你确定你真的需要在同一个页面上使用 3 个轮播吗? (imo 已经太多了 :p)只是说 :)
关于javascript - 试图在一页上放置 3 个轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28644996/
我是 C++ 的新手,我在使用这段代码时遇到了问题: string output_date(int day, int month, int year){ string date; if
所以我这样做了 tar cvzf test.zip FP 为了创建目录 FP 的 zip 但是,它会列出 zip 中的目录 FP/ FP/php/ FP/php/pdf/ FP/php/docs/ F
我正在尝试在 Swift、Xcode 7.3(所以是 Swift 2.2)中创建一个通用类,但我似乎无法让它通过编译器: protocol Struct1Protocol { } struct Str
我的测试用例是这样的: class FooTest extends PHPUnit_Framework_TestCase { /** @covers MyClass::bar */ f
我正在尝试将brew install wine作为使electron-builder工作的一步。但是我所能得到的只是以下响应: ==> Installing dependencies for wine
我这样做: string[,] string1 = {{"one", "0"},{"Two", "5"},{"Three","1"}}; int b = 0; for(int i = 0; i <=
我正在尝试使用 SetWindowsHookEx 键盘 Hook Notepad.exe。 如您所见,工作线程正在将其 ASCII 代码(即 wParam)发送到指定的服务器。 UINT WINAPI
我正在尝试将 ListView 实现到我的 Fragment 中,但无论我尝试什么,我都会得到一个 NullPointerException。我检查对象是否为 null 并记录是否为 null,看起来
我尝试在一行中对齐两个 div。使用 float left 属性,一切顺利。但是当我在 div 中使用图像时,它开始产生问题。 所以这是我的示例代码:- Some headi
我目前正在使用此代码来获取图像的灰度图像表示并以 (512, 370, 1) 的格式表示它大批。 img_instance = cv2.imread(df.iloc[i][x_col]) / 255.
总结 我正在创建一个简单的应用程序,它允许用户选择一个包含顶级窗口的进程。用户首先键入 native DLL(而非托管 DLL)的路径。然后用户键入将在 Hook 过程中调用的方法的名称。该方法不得返
我是一名优秀的程序员,十分优秀!