我正在尝试制作一个图像 slider 。它从 placekitten 获取图像。我希望它能够拍摄不同的图像尺寸。悬停时，它会在底部提供图像的简短描述，在顶部提供图像的名称，并从顶部滑动导航按钮。
我有两个问题:
1.我曾多次尝试使用 jquery 实现切换，但我所做的似乎都不起作用。我认为这与按钮有关，因为每个图像都有按钮。如何更改图像标题但保持相同的按钮输入
2.如何让描述随着文字的增加而扩展。
这就是我到目前为止所拥有的。还有简单的库可以做到这一点吗？
最佳答案
使用这个 jQuery 循环插件。只需用代码更改图像即可。希望这对您有帮助。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div class="nav"><a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a></div>
<div id="slideshow" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
</div>
</body>
<script type="text/javascript">
$('#slideshow').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next',
after: onAfter,
timeout: 0
});
$(function() {
$('td pre code').each(function() {
eval($(this).text());
});
});
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$('#prev')[index == 0 ? 'hide' : 'show']();
$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}
</script>
</html>更多 jQuery 循环插件请访问:jQuery cycle plugins
关于javascript - jQuery 图像幻灯片无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39261567/