我使用了一个图像滑块。在这个jQuery图像滑块的HTML代码中，有一个隐藏的字段，其中包含数值。这个数值只是每个滑块图像应该显示的时间（以秒为单位）。时间结束后，将显示下一个图像。
它的HTML和jQuery代码如下：
HTML代码：
<input type="hidden" name="brand_slider_time" id="brand_slider_time" value="10">
<div class="leaderboard">
<ul id="demo1">
<li><a href="#slide1"><img src="img/Slid1.png" alt="Lorem Ipsum"></a></li>
<li><a href="#slide2"><img src="img/Slid2.png" alt="Lorem Ipsum"></a></li>
<li><a href="#slide3"><img src="img/slid3.png" alt="Lorem Ipsum"></a></li>
</ul>
</div>
jQuery代码：
$(function() {
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: 3000,
auto: true,
preload: 'visible'
});
$('.stop').click(function () {
demo1.stopAuto();
});
$('.start').click(function () {
demo1.startAuto();
});
$('.prev').click(function () {
demo1.goToPrevSlide();
return false;
});
$('.next').click(function () {
demo1.goToNextSlide();
return false;
});
$('.reset').click(function () {
demo1.destroySlider();
return false;
});
$('.reload').click(function () {
demo1.reloadSlider();
return false;
});
$('.init').click(function () {
demo1 = $("#demo1").slippry();
return false;
});
});
已经包含了必要的jQuery和CSS文件。
为了将隐藏字段的值作为n参数传递给滑块函数，我在同一文件中尝试了下面的代码，但没有成功。
$(document).ready(function() {
var val = $('#brand_slider_time').val() * 1000;
demo1.destroySlider();
demo1 = $("#demo1").slippry({
pause: val
});
});
我在同一个文件中的滑块函数代码上面写了这段代码。
我应该如何将这个10秒的值传递给jQuery滑块函数，并将这个值用于函数中，以便滑块中的每个图像都显示10秒？
感谢您花费宝贵的时间来理解我的问题。如果你需要更多关于这个问题的信息，请告诉我。
任何形式的hep都将不胜感激。等待您宝贵的答复。
我通过获取隐藏字段值FIDDLE完美地使其工作
应用pause: 10000,
这里的意思是暂停10秒，然后是下一个图像。
尝试修改代码。享受：）我检查了一下，它工作了。10秒。每img
<!DOCTYPE html>
<html>
<head>
<title>slippry demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="../dist/slippry.min.js"></script>
<script src="//use.edgefonts.net/cabin;source-sans-pro:n2,i2,n3,n4,n6,n7,n9.js"></script>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="../dist/slippry.css">
</head>
<body>
<section class="demo_wrapper">
<article class="demo_block">
<input type="hidden" name="brand_slider_time" id="brand_slider_time" value="10">
<h1>Simple demo with default setups</h1>
<a href="#glob" class='prev'>Prev</a> / <a href="#glob" class='next'>Next</a>
|| <a href="#glob" class='init'>Init</a> | <a href="#glob" class='reset'>Destroy</a> | <a href="#glob" class='reload'>Reload</a>
|| <a href="#glob" class='stop'>Stop</a> | <a href="#glob" class='start'>Start</a>
<ul id="demo1">
<li><a href="#slide1"><img src="img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>
<li><a href="#slide2"><img src="img/image-2.jpg" alt="This is caption 2"></a></li>
<li><a href="#slide3"><img src="img/image-4.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
</ul>
</article>
</section>
<script>
$(function() {
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: $('#brand_slider_time').val() * 1000,
auto: true,
preload: 'visible'
});
$('.stop').click(function () {
demo1.stopAuto();
});
$('.start').click(function () {
demo1.startAuto();
});
$('.prev').click(function () {
demo1.goToPrevSlide();
return false;
});
$('.next').click(function () {
demo1.goToNextSlide();
return false;
});
$('.reset').click(function () {
demo1.destroySlider();
return false;
});
$('.reload').click(function () {
demo1.reloadSlider();
return false;
});
$('.init').click(function () {
demo1 = $("#demo1").slippry();
return false;
});
});
</script>
</body>
</html>