在幻灯片中添加后退和前进功能
Posted
技术标签:
【中文标题】在幻灯片中添加后退和前进功能【英文标题】：Add back and forward functionalities in slideshow 【发布时间】：2015-12-06 17:50:46 【问题描述】：我用 php 和 javascript 制作了一个幻灯片，它可以很好地滑动图像，但我有点卡在后退和前进功能上，如果你能在这里帮助我，我将不胜感激。这就是我到目前为止已经完成了：
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”值，尽管值已更改，但图像没有。可能是因为按下后退/前进调用函数的另一个实例而不是覆盖它。我不确定，我迷路了。
这是fiddle
【问题讨论】：
如果你在 jsfiddle 中分享你的代码而不使用 php，问题会很快解决 提示：将代码if(begin==true) 替换为 if(begin)
另外，if(i==total+1) 到 if(i>total)
*** 也支持 fiddles
'我会回来的' ...用小提琴
【参考方案1】：
我进行了大修，但想法保持不变 (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;
对 HTML 的更改（删除了内联 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);
【讨论】：
awesome alghoritm, ' (total + i + x % total) % total ' 是我正在寻找的关键，非常感谢 欢迎。它是手工制作的：-P【参考方案2】：我已经解决了您的问题 - 主要问题是您调用了内联函数 - 但此时该函数不存在（页面加载中的毫秒数）。另一个是你的 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);
);
【讨论】：
感谢您的回答，但我不想使用任何库，这段代码完全由我编写，我不想保持这种状态，尽管我需要一些帮助。 .. 那么我建议你写一个对象，可能是一个 jQuery 扩展，并在那里添加类似的函数：“SlideShow.next()”并处理这个对象中的所有内容，不要让任何人改变你的内部东西。【参考方案3】：你的小提琴会抛出一个ReferenceError: SlideShow is not defined（Firefox 使用 Firebug）。
尝试将function SlideShow(x)... 替换为SlideShow = function (x) ... (https://jsfiddle.net/Lroatbzg/12/)。
老实说，我不知道为什么后者有效，因为这两个陈述与我是等价的（对此有任何解释吗？）。
以相反的方式声明你的函数可以消除错误 - 至少在我的浏览器中。
【讨论】：
直到现在没有人抱怨这样的问题，我也没有这个错误 你的代码是抛出错误还是你的点击事件什么都不做？你在使用调试器（比如 firebug）吗？ 我的代码工作正常，没有错误，我只是需要一些帮助来实现一些功能，请重新阅读问题【参考方案4】：使用
if(x=='-1')
i--;
else if(x=='1')
i++;
而不是
if(x==-1)
i--;
else if(x==1)
i++;
【讨论】：
【参考方案5】：问题是setTimeOut会延迟执行函数SlideShow。但是，当您单击按钮时，此延迟执行不会停止。为了停止这个执行，我对代码做了一个小的改动。此外，我通过 jQuery 启动 onClick 功能解决了 jsfiddle 中的 ReferenceError。
这个结果可以在这里查看：https://jsfiddle.net/Lroatbzg/13/
$("#slideshow-wrapper").hover(function()
$(".left-arrow,.right-arrow").fadeIn();
, function()
$(".left-arrow,.right-arrow").fadeOut();
);
var i=1;
var direction=1;
var begin=true;
var latest=Math.random();
function SlideShow(parameter)
if(latest!=parameter)
return; //Return when this function is not called through the last click or timeout.
var total=$('#slideshow-beta img').length;
i=i+direction;
if(i>total)
i=1;
if(i<1)
i=total;
begin=true;
for(var j=1;j<=total;j++)
if($('.img_'+j).css('display')!='none')
begin=false;
$('.img_'+total).fadeOut(1000,function()
$('.img_'+j).css('display','none');
$('.img_'+i).fadeIn(1000);
);
break;
if(begin)
$('.img_'+i).show();
setTimeout(function()
SlideShow(parameter);
,5000);
SlideShow(latest);
$("#left").click(function() latest=Math.random(); direction=-1; SlideShow(latest); );
$("#right").click(function() latest=Math.random(); direction=1; SlideShow(latest); );
HTML 修改如下：
<div id="slideshow-controller">
<div class="left-arrow-div" id="left"><span class="left-arrow">Back</span></div>
<div class="right-arrow-div" id="right"><span class="right-arrow">Forward</span></div>
</div>
【讨论】：
以上是关于在幻灯片中添加后退和前进功能的主要内容，如果未能解决你的问题，请参考以下文章
java web系统安全退出后点击浏览器后退按钮还会跳转到刚才浏览页面
用iframe后 点后退按钮时总是在潜套框里后退，如何让整个父页面整体后退呢？