javascript jquery jcarousel 如何添加控制按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13974574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery jcarousel how to add control buttons
提问by Adrian
I am currently working on a site,that uses Sorgilla jquery jcarousel, there are two sliders working together.
我目前正在一个使用 Sorgilla jquery jcarousel 的网站上工作，有两个滑块一起工作。
var carousel_2;
jQuery(document).ready(function() {
jQuery('#right-carousel').jcarousel({
start: 1, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:3,
vertical:true,
itemFirstInCallback: {
onBeforeAnimation: function(carousel, item, index, action) {
if (carousel_2) {
carousel_2[action]();
}
}
}
});
});
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
start: 3, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:3,
vertical:false,
buttonNextHTML: null,
buttonPrevHTML: null,
initCallback: function(c) {
carousel_2 = c;
}
});
});
});
This works as it should but I am wondering is it possible to add external controls with the set up I am using. Unfortunately Im quite new to jquery so still learning.
这可以正常工作，但我想知道是否可以使用我正在使用的设置添加外部控件。不幸的是，我对 jquery 还很陌生，所以还在学习。
What Im looking to do is add buttons underneath the carousel that behave like pagination, here is an example... http://truelogic.org/multicarousel.phpor http://www.skyports.com
我想要做的是在轮播下方添加按钮，其行为类似于分页，这是一个示例... http://truelogic.org/multicarousel.php或http://www.skyports.com
here is the site im working on http://hartyinternational.hailstormcommerce.com/
这是我在http://hartyinternational.hailstormcommerce.com/ 上工作的网站
Ideally if I could get those pagination buttons working similar to above, itd be great.
理想情况下，如果我能让这些分页按钮的工作方式与上面类似，那就太好了。
I have this css set up underneath the carousel.
我在旋转木马下方设置了这个 css。
.jcarousel-pagination {
width:100px;
height:40px;
position:absolute;
right:100px;
bottom:0px;
background:#000;
}
.jcarousel-pagination a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold;
}
Here is some documentation... http://sorgalla.com/projects/jcarousel/
这是一些文档... http://sorgalla.com/projects/jcarousel/
I was considering adding this code to the function inside initCallback:but unsure how to get it working or how to tell it what button represents what slide...
我正在考虑将此代码添加到内部函数中，initCallback:但不确定如何使其工作或如何告诉它哪个按钮代表哪个幻灯片......
jQuery('.jcarousel-pagination a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
Any help would be great, I know its a bit of a general question, but im not sure where to start Thank you.
任何帮助都会很棒，我知道这是一个一般性问题，但我不确定从哪里开始谢谢。
采纳答案by Michel
Copy/Paste the below code on a temp web page, make sure that the page the Javascript points to your folder where they are located and this should work.
将以下代码复制/粘贴到临时网页上，确保 Javascript 页面指向它们所在的文件夹，这应该可以工作。
<!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" />
<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" />
<title>Untitled Document</title>
<style type="text/css">
/**
* Additional styles for the controls.
*/
.jcarousel-control {
margin-bottom: 10px;
text-align: center;
}
.jcarousel-control a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold;
}
.jcarousel-control a:focus,
.jcarousel-control a:active {
outline: none;
}
.jcarousel-scroll {
margin-top: 10px;
text-align: center;
}
.jcarousel-scroll form {
margin: 0;
padding: 0;
}
.jcarousel-scroll select {
font-size: 75%;
}
#mycarousel-next,
#mycarousel-prev {
cursor: pointer;
margin-bottom: -10px;
text-decoration: underline;
font-size: 11px;
}
</style>
<script type="text/javascript">
// for #mycarousel
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
// end for #mycarousel
// for #right-carousel
function right_carousel_initCallback(carousel) {
jQuery('.jcarousel-control-right a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
// end for #right-carousel
jQuery(document).ready(function() {
var carousel_2;
jQuery('#right_carousel').jcarousel({
start: 1, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:3,
vertical:true,
initCallback: right_carousel_initCallback,
itemFirstInCallback: {
onBeforeAnimation: function(carousel, item, index, action) {
if (carousel_2) {
carousel_2[action]();
}
}
}
});
jQuery('#mycarousel').jcarousel({
start: 3, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:3,
vertical:false,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null,
});
});
</script>
</head>
<body>
<div id="mycarousel" class="jcarousel-skin-tango">
<div class="jcarousel-control">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
<ul>
<li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>
</ul>
<div class="jcarousel-scroll">
<form action="">
<a href="#" id="mycarousel-prev">« Prev</a>
<select>
<option value="1">Scroll 1 item per click</option>
<option value="2">Scroll 2 items per click</option>
<option value="3">Scroll 3 items per click</option>
<option value="4">Scroll 4 items per click</option>
<option value="5">Scroll 5 items per click</option>
</select>
<a href="#" id="mycarousel-next">Next »</a>
</form>
</div>
</div>
</div>
<!-- second one -->
<div id="right_carousel" class="jcarousel-skin-tango">
<div class="jcarousel-control-right">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
<ul>
<li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>
</ul>
<div class="jcarousel-scroll">
<form action="">
<a href="#" id="mycarousel-prev">« Prev</a>
<select>
<option value="1">Scroll 1 item per click</option>
<option value="2">Scroll 2 items per click</option>
<option value="3">Scroll 3 items per click</option>
<option value="4">Scroll 4 items per click</option>
<option value="5">Scroll 5 items per click</option>
</select>
<a href="#" id="mycarousel-next">Next »</a>
</form>
</div>
</div>
</div>
</body>
</html>
回答by Sahal
Actually they use this function to rotate
实际上他们使用这个功能来旋转
jQuery(document).ready(function() {
$('.lnkDot').click(function(){alert(1)
var img = jQuery(this).attr('id');
var id = img.substring(img.length-1);
var currId = currentDot;
var i = 0;
var start= 0;
var stop = 0;
if (parseInt(currId) < parseInt(id)) {
start = currId;
stop = id;
}
else {
start= id;
stop = currId;
}
for (i = start; i<= stop; i++) {
actionFromDot = true;
var carousel = jQuery('#mycarousel').data('jcarousel');
carousel.next();
}
currentDot = id;
return false;
});
});
What they do is, when they click on the pagination they takes the id of the current element and get the number (var id = img.substring(img.length-1);).
他们所做的是，当他们点击分页时，他们获取当前元素的 id 并获取数字（var id = img.substring(img.length-1);）。
Once they get the number they will have startand endposition to rotate (Start position they calculate from global variable currentDot).
一旦他们获得了他们将拥有的数字start和end旋转位置（他们从全局变量计算的起始位置currentDot）。
Later the make clicked id is currentDot
后来，点击 id 是 currentDot
Change your pagination links like this.
像这样更改分页链接。
<a href="#" id='page1' class='lnkDot'>1</a>
<a href="#" id='page2' class='lnkDot'>2</a>
<a href="#" id='page3' class='lnkDot'>3</a>
