作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用来自 snook.ca (http://snook.ca/archives/javascript/simplest-jquery-slideshow) 的“最简单的 jQuery 幻灯片”,我喜欢它。我在这里引用代码:
JavaScript
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
CSS
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
HTML
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
我想添加箭头以在单击时手动转到下一张和最后一张图像。由于我还没有在任何地方找到解决方案,而且我对 Jquery 也一无所知,所以我在这里问这个问题......
真的很感谢大家!
最佳答案
$(function(){
$('.fadein img:gt(0)').hide();
$('.nextButton').on('click', function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');
});
$('.previousButton').on('click', function () {
$('.fadein :last-child').fadeIn()
.insertBefore($('.fadein :first-child').fadeOut());
});
});
向后走是不同的,因为另一个脚本正在利用 appendTo
并且当前 img
位于索引 0。您必须提供按钮,但是这很简单。您可以在 this jsFiddle 上试用.
关于javascript - 如何在 "Simplest jQuery Slideshow"上添加导航箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19192195/
我是一名优秀的程序员,十分优秀!