Premier élément d'un diaporama ne montre pas, ainsi que les boutons ne fonctionne pas

Je suis en train de créer plusieurs diaporamas sur la même page et je suis parvenu à obtenir ce code maintenant:Premier élément d'un diaporama ne montre pas, ainsi que les boutons ne fonctionne pas

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"> </div> 
    <div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_0" id="1"> </div> 
    <div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_0" id="2"> </div> 
    <div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_0" id="3"> </div> 
    <a class="next" onclick="slide(0,1)">❯</a> 
</div> 

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

aussi mon corps:

<body onLoad="showSlides()">

SCSS

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

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

    img{ 
     max-height:40vh; 
     max-width:100%; 
     border-radius:5px; 
     -webkit-filter: drop-shadow(5px 5px 5px #000); 
     filter: drop-shadow(0px 2px 5px #222); 
     cursor: zoom-in; 
     display: none; 
    } 
} 

.prev,.next{ 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.2s ease; 
    opacity: 0.25; 

    &:hover{ opacity: 1; } 
}

Javascript

var slideIndex = [0,0] 
function showSlides(){ 
    var aux = slideIndex.length; 
    var i; 
    for(i=0; i<aux; i++){ 
     slide(i,0); 
    } 
} 
function slide(n,m){ 
    var i; 
    var aux = document.getElementsByClassName("slideimg_" + n); 
    var aux2 = aux.length - 1; 
    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[slideIndex[n]].style.display = "block"; 
}

Une autre chose à mentionne est que lorsque je clique sur les boutons suivant/précédent je reçois ceci:

Uncaught TypeError: Cannot read property 'style' of undefined at slide (websitejs2.js:17) at HTMLAnchorElement.onclick (index2.html:87)

Ainsi, quelqu'un peut vous s'il vous plaît aidez-moi obtenir Choses faites?

Source

2017-04-15 Eduard Stefan

Parcourez les commentaires dans le code. ajouter un commentaire si un doute

var slideIndex = [0, 0] 
 

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

 
function slide(n, m) { 
 
    var i; 
 
    var aux = document.getElementsByClassName("slideimg_" + n); 
 
    var aux2 = aux.length - 1; 
 
    /*added logic */ 
 
    if (slideIndex[n] == 3 && m == 1) { 
 
    slideIndex[n] = -1 
 
    } 
 
    if (slideIndex[n] == 0 && m == -1) { 
 
    slideIndex[n] = 4 
 
    } 
 
    /*added logic end*/ 
 
    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[slideIndex[n]].style.display = "block"; 
 
}

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

 
.slide { 
 
    display: block; 
 
    /*changed to block*/ 
 
    padding: 0 35px; 
 
    img { 
 
    max-height: 40vh; 
 
    max-width: 100%; 
 
    border-radius: 5px; 
 
    -webkit-filter: drop-shadow(5px 5px 5px #000); 
 
    filter: drop-shadow(0px 2px 5px #222); 
 
    cursor: zoom-in; 
 
    display: none; 
 
    } 
 
} 
 

 
.prev, 
 
.next { 
 
    cursor: pointer; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    color: black; 
 
    /*changed to black*/ 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
    transition: 0.2s ease; 
 
    opacity: 1; 
 
    /*changed to 1*/ 
 
    &:hover { 
 
    opacity: 1; 
 
    } 
 
} 
 

 

 
/*added*/ 
 

 
img { 
 
    height: 100px; 
 
    width: 100px; 
 
    display: none; 
 
}

<body onLoad="showSlides()"> 
 
    <div class="portfolio-slideshow"> 
 
    <a class="prev" onclick="slide(0,-1)">❮</a> 
 
    <div class="slide"> <img src="https://static.pexels.com/photos/158507/marigold-calendula-orange-blossom-158507.jpeg" class="slideimg_0" id="0"> </div> 
 
    <div class="slide"> <img src="https://static.pexels.com/photos/59836/snowflake-flower-blossom-bloom-59836.jpeg" class="slideimg_0" id="1"> </div> 
 
    <div class="slide"> <img src="https://static.pexels.com/photos/93013/pexels-photo-93013.jpeg" class="slideimg_0" id="2"> </div> 
 
    <div class="slide"> <img src="https://static.pexels.com/photos/101538/dandelion-seeds-nature-spring-101538.jpeg" class="slideimg_0" id="3"> </div> 
 
    <a class="next" onclick="slide(0,1)">❯</a> 
 
    </div> 
 

 
    <div class="portfolio-slideshow"> 
 
    <a class="prev" onclick="slide(1,-1)">❮</a> 
 
    <div class="slide"> <img src="https://static.pexels.com/photos/158507/marigold-calendula-orange-blossom-158507.jpeg" class="slideimg_1" id="0"> </div> 
 
    <div class="slide"> <img src="https://static.pexels.com/photos/59836/snowflake-flower-blossom-bloom-59836.jpeg" class="slideimg_1" id="1"> </div> 
 
    <div class="slide"> <img src="https://static.pexels.com/photos/93013/pexels-photo-93013.jpeg" class="slideimg_1" id="2"> </div> 
 
    <div class="slide"> <img src="https://static.pexels.com/photos/101538/dandelion-seeds-nature-spring-101538.jpeg" class="slideimg_1" id="3"> </div> 
 
    <a class="next" onclick="slide(1,1)">❯</a> 
 
    </div> 
 
</body>

Source

2017-04-15 09:27:56

Merci beaucoup, je que vous avez dit et aussi joué avec .parent.style.display et j'ai obtenu ce que je voulais. Thxx! –

Premier élément d'un diaporama ne montre pas, ainsi que les boutons ne fonctionne pas

Répondre

Questions connexes