2017-10-12 4 views
0

S'il vous plaît être patient avec moi, même si j'ai un diplôme d'associé, je me sens très perdu en ce moment. encore un débutant en ce qui me concerne. J'ai une disposition de 2 colonnes et ce n'est pas bien installé, je suis sûr parce que ma marge pour la colonne de droite semble complètement détraquée. J'ai un diaporama de chaque côté. Aucun de mes diaporamas ne fonctionne. Ils montrent juste la dernière image. En outre, mon pied de page est derrière mes diaporamas au lieu de dessous. J'ai essayé d'ajouter et de retirer un conteneur div incluant et excluant le pied de page, mais aucun ne semble le placer au bon endroit. J'ai utilisé du code que j'ai utilisé auparavant pour un projet différent pour les diaporamas mais il ne répond pas de la même manière ici. Mes fonctions de diaporama n'ont pas de nom car la dernière fois que je les ai utilisées, elles ne fonctionnaient que sans noms. Je sais que plusieurs variables ne sont pas définies mais encore une fois, la dernière fois cela a fonctionné sans cela. Je ne suis pas certain de la façon dont j'ai besoin de les définir. Je suis sûr que je néglige quelque chose de petit mais je suis parti plusieurs fois et ne peux pas le trouver. voici le code ci-dessous, css, html et js ...mon diaporama ne fonctionne pas et mon pied n'est pas à sa place

/*footer*/ 
.footer { 
margin: 10px; 
padding: 5px; 
width: 100%; 
float: center; 
border-top: dashed #bcbaba 3px; 
} 

/*page container*/ 
#container { 
width: 1024px; 
height: auto; 
margin: 5px; 
} 

.left { 
width: 506px; 
float: left; 
} 

.right { 
margin-left: 900px; 
} 

.clear { 
clear: both; 
} 


<div class="container"> 

<!--Slideshow of created work-->  
<div id="sites" class="left"> 
<div id="slideshow" class="slideshow"> 
<img id="bca" class="slide" src="../images/websites/bca/bcass.jpg" 
alt="Billie's Custom Abstracs"/> 
<img id="bw" class="slide" src="../images/websites/bw/bwss.jpg" 
alt="Bellwood Museum"/> 
<img id="sej" class="slide" src="../images/websites/sej/sejss1.jpg" 
alt="self esteem journal" /> 
<img id="sej1" class="slide" src="../images/websites/sej/sejss3.jpg" 
alt="meditation script" /> 
</div> 
</div> 

<div id="art" class="right"> 
<div id="slideshow1" class="slideshow1"> 
<img id="cbv1" class="slide1" src="../images/book/vol1/Abstracts and Fun 
V1_Page_02.jpg" alt="coloring book volume 1"/> 
<img id="cbv2" class="slide1" src="../images/book/vol2/pg 0.jpg" 
alt="coloring book volume 2"/> 
<img id="ap" class="slide1" src="../images/art/paintings/bluesnow.jpg" 
alt="blue snow painting"/> 
<img id="wd"class="slide1" src="../images/art/trinkets/lbh1.jpg" alt="wooden 
trinkets"/> 
</div> 
</div> 

</div> 
<!--Footer--> 
<div id="footer"> 
<p><b>Billie Cochell </b><br> phone <br> <a 
href="mailto:[email protected]">[email protected]</a> 
    <br> <a 
href="mailto:[email protected]">[email protected]</a> 
    </p> 
    <br> 
</div> 

//Home Page/Slideshow// 

(function ($) { 

var slideshow = (function() { 
     var counter = 0; 
     i, 
      j, 
      slides = $("#slideshow .slide"); 
      slidesLen = slides.length - 1; 
     for (i = 0, j = 9999; i < slides.length; i += 1, j -= 1) { 
      $(slides[1]).css("z-index", j); 
     } 
     return { 
      startSlideshow: function() { 
       window.setInterval (function() { 
        if (counter === 0) { 
         slides.eq(counter).fadeOut(); 
         counter += 1; 
        } else if (counter === slidesLen) { 
         counter = 0; 
         slides.eq(counter).fadeIn(function(){ 
          slides.fadeIn(); 
         }); 
        } else { 
         slides.eq(counter).fadeOut(); 
         counter += 1; 
        } 
       }, 7000); 
      } 
     }; 
    }()); 
    slideshow.startSlideshow(); 
}(jQuery)); 

        (function ($) { 
    "use strict"; 
    var slideshow2 = (function() { 
     var counter = 0; 
     i, 
      j, 
      slides = $("#slideshow1 .slide1"); 
      slidesLen = slides.length - 1; 
     for (i = 0, j = 9999; i < slides.length; i += 1, j -= 1) { 
      $(slides[1]).css("z-index", j); 
     } 
     return { 
      startSlideshow: function() { 
       window.setInterval (function() { 
        if (counter === 0) { 
         slides.eq(counter).fadeOut(); 
         counter += 1; 
        } else if (counter === slidesLen) { 
         counter = 0; 
         slides.eq(counter).fadeIn(function(){ 
          slides.fadeIn(); 
         }); 
        } else { 
         slides.eq(counter).fadeOut(); 
         counter += 1; 
        } 
       }, 7000); 
      } 
     }; 
    }()); 
    slideshow2.startSlideshow(); 
}(jQuery)); 

Répondre

0

je peux voir que, avant la il y a une fermeture inutile et je pense que chaque div id doit être fermé avec plutôt que> parce id est utilisé pour un élément

0

Il semblerait que vous ayez rencontré quelques problèmes de css/javascript. Il y a beaucoup de façons différentes de réaliser un diaporama, alors je voulais vous lier à quelques exemples/tutoriels ici, au cas où vous êtes intéressé:

Il y a aussi cookie cutter et hors des options de la boîte:

Il y a beaucoup plus, ce sont ici sont la nourriture pour la pensée.

En ce qui concerne le code que vous avez écrit:

Pour commencer, vous devez champ votre cadre de diaporama avec quelques css. Vous pouvez accomplir cela en définissant une hauteur/largeur pour vos diaporamas gauche et droit et en réglant le dépassement sur aucun, de sorte que tout ce qui est en dehors du cadre est caché.

.container { 
    width: 1024px; 
    height: auto; 
    margin: 5px; 
} 

.left, .right { 
    width: 460px; 
    height: 506px; 
    overflow: hidden; 
    float: left; 
    position: relative; 
    margin: 5px; 
} 

Ensuite, les images doivent être positionnées l'une au-dessus de l'autre pour le puisque vous utilisez un effet de fondu au lieu d'un effet de position, donc nous voulons que les images à tous en position déjà.

.left .slideshow img, .right .slideshow img { 
    position: absolute; 
    top: 0; 
} 

Pour le javascript, nous voulons toujours effacer une image sur et fade autre dans, la seule chose qui change est le compteur, que nous pouvons accomplir avec la fonction suivante:

function changeImage() { 
     slides.eq(counter).fadeOut(1000); 
     if (counter >= slidesLen) { 
     counter = 0; 
     } else { 
     counter += 1; 
     } 
     slides.eq(counter).fadeIn(1000); 
} 

I J'ai mis en place un codepen ici, pour illustrer cette méthode: https://codepen.io/anon/pen/bojNqK

J'ai enlevé la structure de fermeture que vous utilisiez auparavant, puisque vous voulez exactement la même fonctionnalité pour les deux diaporamas (donc nous pouvons réutiliser la fonction unique pour produire deux ntexts). Si vous avez des questions sur la structure de fermeture, cela peut également être utile: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures