我一直在查看一些使用 jQuery 和 JS 以及 HTML 和 CSS 来创建滑动图片库的代码。我遇到了这个 post并使用“修改后的”代码复制代码。但是,画廊只显示第一张图片。下一次和上一次点击不执行任何操作。我开始学习一些 JS 和 jQuery。我已经看了这段代码一段时间了,但我无法弄清楚问题出在哪里。
这是我正在使用的脚本:
$(document).ready(function(){
$('.slider > #1').show('fade',500).addClass('current');
$('.next').click(function(event){
event.preventDefault();
$('.previous').removeClass('previous');
$('.current').removeClass('current').addClass('previous');
$('.previous').hide("slide",{direction: 'left'}, 500);
var previousId = parseInt($('.previous').attr('id'));
$('#'+(previousId+1)).show("slide", {direction: 'right'}, 500).addClass('current');
});
$('.prev').click(function(event){
event.preventDefault();
$('.previous').removeClass('previous');
$('.current').removeClass('current').addClass('previous');
$('.previous').hide("slide",{direction: 'right'}, 500);
var previousId = parseInt($('.previous').attr('id'));
var Id = parseInt($('.current').attr('id'));
$('#'+(previousId-1)).show("slide", {direction: 'left'}, 500).addClass('current');
});
});
我上传到jfiddle .
任何帮助都会很棒!谢谢
编辑 我偶然发现 this并注意到代码有两个用于脚本的 src。我添加了 ui 脚本,jQuery 完美运行!
最佳答案
缺少幻灯片的库,添加它以使其工作:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
关于javascript - 创建一个滑动图片库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18970430/