jquery 循环插件、嵌套幻灯片、'after' 选项或测试第一张和最后一张图像
Posted
技术标签:
【中文标题】jquery 循环插件、嵌套幻灯片、\'after\' 选项或测试第一张和最后一张图像【英文标题】：jquery cycle plugin, nested slideshow, 'after' option or testing for first and last imagejquery 循环插件、嵌套幻灯片、'after' 选项或测试第一张和最后一张图像 【发布时间】：2011-09-16 13:38:30 【问题描述】：在我的嵌套幻灯片中，我有“上一个”和“下一个”控件。如果您在第一张幻灯片上，我希望能够降低“上一个”的 CSS 不透明度，如果您在最后一张幻灯片上，我希望能够降低“下一个”的 CSS 不透明度。
'after: onAfter' 选项本来就足够了，但在我的代码中用于嵌套幻灯片控件时，它似乎不起作用。
有没有办法在嵌套幻灯片中正确实现“之后”，或者测试嵌套幻灯片中的第一张和最后一张图像？谢谢你
这是我的代码。
<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function()
// init and stop the inner slideshows
var inners = $('.inner-slideshow').cycle().cycle('stop');
var slideshow = $('#slideshow').cycle(
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide)
// return sel string for existing anchor
return '#nav li:eq(' + (idx) + ') a';
,
before: function()
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).cycle(
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
prev: '#prev',
next: '#next',
nowrap: 1
);
);
);
</script>
<title>dev</title>
</head>
<body>
<ul id="nav">
<li><a href="#">Top Slidehsow 1</a></li>
<li><a href="#">Top Slidehsow 2</a></li>
</ul>
<div id="controls">
<a id="prev" href="#">< Prev</a>
<a id="next" href="#">Next ></a>
</div>
<div id="slideshow">
<div class="inner-slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" >
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" >
</div>
<div class="inner-slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" >
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" >
<img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" >
</div>
</div>
</body>
</html>
【问题讨论】：
首先，这段代码甚至没有做我认为你想要的。在玩了各种选项后（请参阅小提琴 jsfiddle.net/morrison/m8AFG/1 到 jsfiddle.net/morrison/m8AFG/4），我无法让您的代码拥有两个幻灯片并在它们之间切换。 您好，很抱歉我查看了您的链接。我已将问题中的代码从 sn-ps 更新到应该可以工作的整个页面。 【参考方案1】：我认为这就是您想要的（编辑了您的示例）： http://jsfiddle.net/m8AFG/18/
$(document).ready(function()
// init and stop the inner slideshows
var inners = $('.inner-slideshow').cycle().cycle('stop');
var slideshow = $('#slideshow').cycle(
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide)
// return sel string for existing anchor
return '#nav li:eq(' + (idx) + ') a';
,
before: function()
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).cycle(
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
prev: '#prev',
next: '#next',
nowrap: 1,
after: function()
$('#prev').removeClass('opac');
$('#next').removeClass('opac');
var countImg = $(this).siblings().size();
if ($(this).index() == 0) $('#prev').addClass('opac');
if ($(this).index() == countImg) $('#next').addClass('opac');
);
);
);
添加了 css 不透明度以及 jquery 和循环脚本链接，效果很好
你好，迈克尔
【讨论】：
【参考方案2】：知道你使用的是什么插件会很有帮助，但是大多数滑块插件都有一个参数，你可以添加一个函数，每次实际滑动发生时都会调用它，比如“onChange”。如果这个插件有这样的功能，你可以使用一些简单的 Javascript 来直接操作 CSS 或元素，或者向它们添加一个类以允许你在 CSS 中操作它们。
所以你需要知道当前索引 - 看起来像 'idx' 可能会提供，然后你会做类似（伪代码）的事情
if(currentSlideNumber == slides.length)
//Reduce opacity of next tab
else if(currentSlideNumber == 1)
//Reduce opacity of previous tab
'currentSlideNumber' 是当前索引，slides.length 计算幻灯片的数量 - 在 Javascript 中是：
$('.inner-slideshow').children('img').length
【讨论】：
所以查看选项页面，选项 'after:' 看起来可以让您将上述代码添加到您的页面，有意义吗？ 嗨汤姆，谢谢是有道理的。我应该更仔细地查看“之后”选项。我没有注意到除了传递预定义的值之外，您还可以为它编写函数。以上是关于jquery 循环插件、嵌套幻灯片、'after' 选项或测试第一张和最后一张图像的主要内容，如果未能解决你的问题，请参考以下文章
lightslider-支持移动触摸的轻量级jQuery幻灯片插件
jQuery Cycle 插件 - 如何返回当前显示幻灯片的索引号？