个人中心
gpt4 book ai didi

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

转载 作者：IT王子 更新时间：2023-10-29 00:08:34 27 4
gpt4 key购买 nike

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

最佳答案

我已经进行了大修，但想法保持不变 ( 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);

}

关于javascript - 在幻灯片中添加后退和前进功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32501929/

27 4 0
文章推荐： mysql - 为什么升级我的版本 django-mptt 后出现此数据库迁移错误？
文章推荐： android - 运行 zipalign 时出错
文章推荐： mysql - 使用连接池处理事件记录超时的正确方法是什么？
文章推荐： Android - 通知管理器，有一个没有 Intent 的通知
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com