Question

所以，我试图在我的网站上获得多个幻灯片。我做了几乎所有的事情，除了我按下图片时，预览的模式显示，但点击的图像没有显示。我必须使用幻灯片的按钮来浏览它们并使第一个出现。 **

如果您不想查看整个代码，可以在此处查看发生了什么：http://beta.eduardstefan.com

** 我不是在试图宣传自己，我只是觉得没有示例我不是很容易理解

所以，我的问题是，当我按下一张图片时，如何让第一张图片出现，或者为什么没有发生，我的代码有什么不好？

我的HTML：

<div class="portfolio-slideshow">
    <a class="prev" onclick="slide(0,-1)">❮</a>
    <div class="slide"> <img src="img/dailyui/008.png" class="slideimg_0" id="0" data-no="0"> </div>
    <div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_0" id="1" data-no="0"> </div>
    <div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_0" id="2" data-no="0"> </div>
    <div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_0" id="3" data-no="0"> </div>
    <a class="next" onclick="slide(0,1)">❯</a>
</div>

<div class="portfolio-slideshow">
    <a class="prev" onclick="slide(2,-1)">❮</a>
    <div class="slide"> <img src="img/dailyui/008.png" class="slideimg_2" id="0" data-no="2"> </div>
    <div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_2" id="1" data-no="2"> </div>
    <div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_2" id="2" data-no="2"> </div>
    <div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_2" id="3" data-no="2"> </div>
    <a class="next" onclick="slide(2,1)">❯</a>
</div>

<div class="imgpreview">
    <i class="fa fa-close" onclick="closepreview()"></i>
    <div class="slidepreview no_0">
        <a class="prev" onclick="slide(1,-1)">❮</a>
        <div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_1" id="0"> </div>
        <div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_1" id="1"> </div>
        <div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_1" id="2"> </div>
        <div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_1" id="3"> </div>
        <a class="next" onclick="slide(1,1)">❯</a>
    </div>
    <div class="slidepreview no_2">
        <a class="prev" onclick="slide(3,-1)">❮</a>
        <div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_3" id="0"> </div>
        <div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_3" id="1"> </div>
        <div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_3" id="2"> </div>
        <div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_3" id="3"> </div>
        <a class="next" onclick="slide(3,1)">❯</a>
    </div>
</div>

SCSS：

.portfolio-slideshow{
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slide{
    padding:0 35px;
    display: block;

    img{
        display: none;
        max-height:40vh;
        max-width:100%;
    }
}
.prev,.next{
    display: flex;
    align-items: center;
    justify-content: center;
}

.imgpreview{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    padding: 50px;
}

.slidepreview{
    display: none;
    align-items: center;
    justify-content: center;

.slidep{
    display: block;

    img{
        display: none;
        max-height: 85vh;
        max-width: 85vw;
    }
}

和Javascript：

var slideIndex = [0,0,0,0,0,0,0,0]
function showSlides(){
    var aux = slideIndex.length;
    var i;
    for(i=0; i<aux; i+=2) { slide(i,0); }
}

function slide(n,m){
    var i;
    var aux = document.getElementsByClassName("slideimg_" + n);
    var aux2 = aux.length - 1;
    if (slideIndex[n] == 3 && m == 1) slideIndex[n] = -1;
    if (slideIndex[n] == 0 && m == -1) slideIndex[n] = 4;
    slideIndex[n] += m;
    if (slideIndex[n] < 0) slideIndex = aux2;
    else if (slideIndex[n] > aux2) slideIndex = 0;
    for(i=0; i<aux.length; i++){
        aux[i].style.display = "none";
        aux[i].parentElement.style.display = 'none';
    }
    aux[slideIndex[n]].style.display = "block";
    aux[slideIndex[n]].parentElement.style.display = 'block';
}

function closepreview(){
    $('.imgpreview').css("display" , "none");
    $('.slidepreview').css("display" , "none")
}

$(document).ready(function() {
    $(".slide img").click(function(){
        var id = $(this).attr('id');
        var no = $(this).attr('data-no');
        var no2 = no + 1;

        $(".imgpreview").css("display" , "flex");
        $(".no_" + no).css("display" , "flex");
        $("img#" + id + ".slideimg_" + no2).css("display" , "block");
        slideIndex[no2] = id;
    });
}).resize();

Answer 1

ID必须是唯一的。

我建议将它们附加到js代码（与js代码分开的html），而不是内联事件处理程序。

我删除了所有ID，并使用以下命令更改了jQuery中的所有内容：

我使用了一个类：主动。该类用于标记当前活动元素。而且，每当我需要移动next或prev时，我将此类移动到相应的元素。该类将跟踪必须显示的img。

摘录：

$(document).ready(function() {
    //
    // Toggle visibility
    //
    $('.slide:not(.active), .slide:not(.active) img').toggle(false);
    $('.slide.active, .slide.active img').toggle(true);

    //
    // closing preview....
    //
    $('.imgpreview .fa.fa-close').on('click', function(e) {
        $('.imgpreview, .slidepreview').css("display" , "none");
        //
        // ...remove active class and toggle visibility
        //
        $('.imgpreview, .slidepreview').find('.active, .active img').toggleClass(false).removeClass('active');
    });

    //
    // on prev....
    //
    $(".prev").on('click', function(e) {
        //
        // get the active element and so the previous one
        //
        var active = $(this).nextAll('.slide.active');
        var prev = active.prev('.slide');
        if (prev.length == 0) {
            //
            // if at the beginning take the last one
            //
            prev = $(this).nextAll('.slide').last();
        }
        //
        // move active class and toggle visibility
        //
        active.removeClass('active');
        prev.addClass('active').find('img').andSelf().toggle(true);
        $('.slide:not(.active), .slide:not(.active) img').toggle(false);
    });

    $(".next").on('click', function(e) {
        //
        // get the active element and so the next one
        //
        var active = $(this).prevAll('.slide.active');
        var next = active.next('.slide');
        if (next.length == 0) {
            //
            // if at the end take the first one
            //
            next = $(this).prevAll('.slide').last();
        }
        //
        // move active class and toggle visibility
        //
        active.removeClass('active');
        next.addClass('active').find('img').andSelf().toggle(true);
        $('.slide:not(.active), .slide:not(.active) img').toggle(false);
    });

    $(".slide img").on('click', function(e) {
        //
        // take the index of curr element in the parent element
        //
        var idx = $(this).closest('div.slide').index();
        var no = $(this).data('no');

        $('.imgpreview, .no_' + no).css('display' , 'flex');
        $('.no_' + no).children().eq(idx).addClass('active');
        $('.no_' + no).find('.slide:not(.active), .slide:not(.active) img').toggle(false);
        $('.no_' + no).find('.slide.active, .slide.active img').toggle(true);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/style.css">
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/font-awesome.css">


<div class="portfolio-slideshow">
    <a class="prev">❮</a>
    <div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_0" data-no="0"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_0" data-no="0"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_0" data-no="0"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_0" data-no="0"></div>
    <a class="next">❯</a>
</div>

<div class="portfolio-slideshow">
    <a class="prev">❮</a>
    <div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_2" data-no="2"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_2" data-no="2"></div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_2" data-no="2"> </div>
    <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_2" data-no="2"></div>
    <a class="next">❯</a>
</div>

<div class="imgpreview">
    <i class="fa fa-close"></i>
    <div class="slidepreview no_0">
        <a class="prev" onclick="slide(1,-1)">❮</a>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_1"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_1"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_1"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_1"></div>
        <a class="next">❯</a>
    </div>
    <div class="slidepreview no_2">
        <a class="prev">❮</a>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_3"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_3"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_3"></div>
        <div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_3"></div>
        <a class="next">❯</a>
    </div>
</div>

Answer 2

这里至少有一个问题：

var no = $(this).attr('data-no');
var no2 = no + 1;

no是一个字符串，因此如果no为“0”，则no + 1为“01”，因此您可以执行此操作：

var no = $(this).attr('data-no');
var no2 = Number(no) + 1;

https://codepen.io/anon/pen/MmwdZb?editors=1111

除此之外，为什么重新发明轮子？有很多好的幻灯片插件可用。

Javascript不会切换元素的显示

如果您不想查看整个代码，可以在此处查看发生了什么：http://beta.eduardstefan.com

2 个答案: