我正在尝试使用Jquery Cycle插件http://malsup.com/jquery/cycle/创建菜单驱动程序幻灯片,但我无法弄清楚如何使其正常工作。它将数字放在导航上?我还希望它自动循环,但在菜单项悬停时停止。
我想让它与这个插件类似(注意我不能使用它,因为它是与其他jquery冲突的mootools) http://www.devthought.com/wp-content/projects/mootools/barackslideshow/Demo/
这是我正在实施的代码
<script type="text/javascript" src="js/jquery.cycle.all.2.72v2.js.gz"></script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
speed: 200,
timeout: 0,
pager: '#nav',
pagerEvent: 'mouseover',
activePagerClass: 'activeSlide', // class name used for the active pager element
});
});
</script>
<div id="nav">
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
<a href="#">test4</a>
<a href="#">test5</a>
<a href="#">test6</a>
</div>
<div id="slideshow" class="pics">
<a href="#"><img src="images/1.jpg" alt="#" /></a>
<a href="#"><img src="images/2.jpg" alt="#" /></a>
<a href="#"><img src="images/3.jpg" alt="#" /></a>
<a href="#"><img src="images/4.jpg" alt="#" /></a>
<a href="#"><img src="images/5.jpg" alt="#" /></a>
<a href="#"><img src="images/6.jpg" alt="#" /></a>
</div>
谢谢你的帮助 朱
答案 0 :(得分:1)
您对冲突的假设可以是句柄而不是$ use jQuery
,或者您可以使用自己的自定义ID,因此可以将jquery设置为使用jq来执行此操作:
var jq=$.noConflict();
这意味着你可以同时使用jquery和mootools,而不是给你带来麻烦。
您找到的这个插件有选项暂停以启用hove上的暂停,请参阅here。所以在你的情况下:
$(function() {
$('#slideshow').cycle({
speed: 200, //timer removed so it cycles automatically.
pager: '#nav',
pause: 1, //pause on hover
pagerEvent: 'mouseover',
after: onAfter,
activePagerClass: 'activeSlide' //Remove comma here
});
});
//Use this to add/remove styling to your #navs.
function onAfter() {
}
此外它还说明你的容器中的每个孩子都是幻灯片,所以在你的情况下你的<a>
将是一张幻灯片,我建议将它包装在div中:)