首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在幻灯片中添加后退和前进功能

在幻灯片中添加后退和前进功能
EN

Stack Overflow用户
提问于 2015-09-10 20:28:33
回答 5查看 559关注 0票数 18

我用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

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32501929

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档