在幻灯片中添加后退和前进功能
我用php和javascript制作了一个幻灯片，它可以很好地幻灯片图像，但我有点困在后退和前进的功能上，如果你能帮我一点忙，我将不胜感激here.This就是我到目前为止所做的：
PHP：
$dir = 'images/slideshow';
$images = scandir($dir);
$i = 0;
echo '<div id="slideshow-wrapper">';
echo '<div id="slideshow-beta">';
foreach($images as $img){
if ($img != '.' && $img != '..') {
$i++;
echo '<img src="../images/slideshow/'.$img.'" class="img_'.$i.'">';
}
}
echo '</div>';
echo '<div id="slideshow-controller">';
echo '<div class="left-arrow-div"><span class="left-arrow" onclick="SlideShow(-1);"></span></div>';
echo '<div class="right-arrow-div"><span class="right-arrow" onclick="SlideShow(1);"></span></div>';
echo '</div>';
echo '</div>';Javascript：
var i=1;
var begin=true;
function SlideShow(x){
if(x==-1){
i--;
}else if(x==1){
i++;
}
var total=$('#slideshow-beta img').length;
for(var j=1;j<=total;j++){
if($('.img_'+j).css('display')!='none'){
begin=false;
break;
}else{
begin=true;
}
}
if(i>total){
i=1;
$('.img_'+total).fadeOut(1000,function(){
$('.img_'+i).fadeIn(1000);
});
}else if(begin){
$('.img_'+i).show();
}else if(!begin){
$('.img_'+(i-1)).fadeOut(1000,function(){
$('.img_'+i).fadeIn(1000);
});
}
setTimeout(function(){
i++;
SlideShow(x);
},5000);
}HTML：
<body onload="SlideShow(false);">正如您所看到的，我试图创建一个onclick事件来更改运行时的'i‘值，尽管该值已更改，但图像并未更改。也许是因为按back/forward调用了函数的另一个实例，而不是覆盖它。我不确定，我在这一点上迷路了。
这是一个fiddle
回答 5
Stack Overflow用户
发布于 2015-09-14 16:48:30
我做了一个重大修改，但想法保持不变(fiddle)：
对CSS的更改：
.left-arrow, .right-arrow {
cursor: pointer;
/** display: none **/
}
#slideshow-controller {
z-index: 2;
position: absolute;
/** added **/
opacity: 0;
transition: opacity 300ms ease-in;
/***********/
}
#slideshow-wrapper:hover > #slideshow-controller {
opacity: 1;
}对超文本标记语言的更改(删除内联onClick)：
<div class="left-arrow-div"><span class="left-arrow">Back</span>
</div>
<div class="right-arrow-div"><span class="right-arrow">Forward</span>
</div>Javascript：
var i = 0;
var images = $('#slideshow-beta img'); // cache all images
var total = images.length;
var timeout;
/*** hide all images at the start ***/
images.each(function (index) {
$(this).css({
display: 'none'
});
});
/*** bind event handlers to arrows ***/
$('.left-arrow').click(function () {
SlideShow(-1);
});
$('.right-arrow').click(function () {
SlideShow(1);
});
/*** Start the slideshow on 1st image ***/
SlideShow(0);
function SlideShow(x) {
if (isNaN(x)) { // throw error if x is not a number
throw new Error("x must be a number");
}
clearTimeout(timeout); // clear previous timeout if any to prevent multiple timeouts running
var current = (total + i + x % total) % total; // get the current image index
$(images[i]).fadeOut(1000, function () { // fade out the previous
$(images[current]).fadeIn(1000); // fade in the current
});
i = current; // set i to be the current
timeout = setTimeout(function () { // cache the timeout identifier so we can clean it
SlideShow(1);
}, 5000);
}Stack Overflow用户
发布于 2015-09-14 16:07:12
我已经解决了你的问题--主要的问题是你调用了内联函数--但是这个函数在这一刻并不存在(页面加载中的毫秒数)。另一个是if (现在有3=，包括类型-因为false、0、-1等等都是“相同的”。现在唯一的问题是，间隔无限运行，并且可以在手动更改后立即调用下一个图像。
总之，我建议您使用像cycle2这样的库或其他类似的库。
https://jsfiddle.net/Lroatbzg/15/
jQuery(window).on('load', function() {
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var total = $('#slideshow-beta img').length;
function SlideShow(x) {
if(x === -1) {
i--;
} else if(x === 1) {
i++;
}
if(i > total) {
i = 1;
}
$('#slideshow-beta img').hide();
$('#slideshow-beta .img_' + i).fadeIn(1000);
}
setInterval(function() {
i++;
SlideShow(i);
}, 5000);
jQuery('.left-arrow-div').on('click', function() {
SlideShow(-1);
});
jQuery('.right-arrow-div').on('click', function() {
SlideShow(1);
});
SlideShow(false);
});Stack Overflow用户
发布于 2015-09-14 15:25:51
你的小提琴抛出了一个ReferenceError: SlideShow is not defined (使用Firebug的火狐)。
尝试用SlideShow = function (x) {...} (https://jsfiddle.net/Lroatbzg/12/)替换function SlideShow(x){...}。
老实说，我不知道后者为什么有效，因为这两个语句等同于我(对此有什么解释吗？)。
反过来声明你的函数可以消除这个错误--至少在我的浏览器中是这样。
https://stackoverflow.com/questions/32501929
复制相似问题