Diashows (mehrere) für HTML/Webseite

Question

Ich versuche, zwei Diashows auf der gleichen Seite, die beide von der gleichen CSS und Java-Skript ausgeführt werden. Mein Problem ist, dass ich nicht herausfinden kann, warum meine zweite Diashow eines der Bilder herunterdrückt. Beachten Sie auf dem Foto, dass die zweite Diashow das Bild eines weißen Kreises vertikal nach unten und links von der Seite verschiebt. Wenn irgendjemand erklären kann, was ich falsch gemacht habe, würde ich es und andere Ratschläge ebenso schätzen! Danke

The Image of the result of my slideshows(two of them) 

<script> 
 
    
 

 
    //1. set ul width 
 
     //2. image when click prev/next button 
 
     var ul; 
 
     var li_items; 
 
     var imageNumber; 
 
    var imageWidth; 
 
    var prev, next; 
 
    var currentPostion = 0; 
 
    var currentImage = 0; 
 

 

 
    function init(){ 
 
    \t ul = document.getElementById('image_slider'); 
 
    \t li_items = ul.children; 
 
    \t imageNumber = li_items.length; 
 
    \t imageWidth = li_items[0].children[0].clientWidth; 
 
    \t ul.style.width = parseInt(imageWidth * imageNumber) + 'px'; 
 
    \t prev = document.getElementById("prev"); 
 
    \t next = document.getElementById("next"); 
 
    \t //.onclike = slide(-1) will be fired when onload; 
 
    \t /* 
 
    \t prev.onclick = function(){slide(-1);}; 
 
    \t next.onclick = function(){slide(1);};*/ 
 
    \t prev.onclick = function(){ onClickPrev();}; 
 
    \t next.onclick = function(){ onClickNext();}; 
 
    } 
 

 
    function animate(opts){ 
 
    \t var start = new Date; 
 
    \t var id = setInterval(function(){ 
 
    \t \t var timePassed = new Date - start; 
 
    \t \t var progress = timePassed/opts.duration; 
 
    \t \t if (progress > 1){ 
 
    \t \t \t progress = 1; 
 
    \t \t } 
 
    \t \t var delta = opts.delta(progress); 
 
    \t \t opts.step(delta); 
 
    \t \t if (progress == 1){ 
 
    \t \t \t clearInterval(id); 
 
    \t \t \t opts.callback(); 
 
    \t \t } 
 
    \t }, opts.delay || 17); 
 
    \t //return id; 
 
    } 
 

 
    function slideTo(imageToGo){ 
 
    \t var direction; 
 
    \t var numOfImageToGo = Math.abs(imageToGo - currentImage); 
 
    \t // slide toward left 
 

 
    \t direction = currentImage > imageToGo ? 1 : -1; 
 
    \t currentPostion = -1 * currentImage * imageWidth; 
 
    \t var opts = { 
 
    \t \t duration:1000, 
 
    \t \t delta:function(p){return p;}, 
 
    \t \t step:function(delta){ 
 
    \t \t \t ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px'; 
 
    \t \t }, 
 
    \t \t callback:function(){currentImage = imageToGo;} 
 
    \t }; 
 
    \t animate(opts); 
 
    } 
 

 
    function onClickPrev(){ 
 
    \t if (currentImage == 0){ 
 
    \t \t slideTo(imageNumber - 1); 
 
    \t } 
 
    \t else{ 
 
    \t \t slideTo(currentImage - 1); 
 
    \t } 
 
    } 
 

 
    function onClickNext(){ 
 
    \t if (currentImage == imageNumber - 1){ 
 
    \t \t slideTo(0); 
 
    \t } 
 
    \t else{ 
 
    \t \t slideTo(currentImage + 1); 
 
    \t } 
 
    } 
 

 
    window.onload = init; 
 
    </script>

/* Silent Auction */ 
 
/* SLIDESHOW */ 
 

 
    .container2{ 
 
    \t width:800px; 
 
    \t height:400px; 
 
    \t padding:5px; 
 
    \t border:1px solid #E6E6FA; 
 
    \t -webkit-box-sizing:border-box; 
 
    \t -moz-box-sizing:border-box; 
 
    \t box-sizing:border-box; 
 
    \t background: #E6E6FA; 
 
    } 
 
.slider_wrapper{ 
 
\t overflow: hidden; 
 
\t position:relative; 
 
\t height:500px; 
 
\t top:auto; 
 
} 
 
#image_slider{ 
 

 
\t position: relative; 
 
\t height: auto; 
 
\t list-style: none; 
 
\t overflow: hidden; 
 
\t float: left; 
 
\t /*Chrom default padding for ul is 40px */ 
 
\t padding:0px; 
 
\t margin:0px; 
 
} 
 
#image_slider li{ 
 
\t position: relative; 
 
\t float: left; 
 
} 
 
.nvgt{ 
 
\t position:absolute; 
 
\t top: 120px; 
 
\t height: 50px; 
 
\t width: 30px; 
 
\t opacity: 0.6; 
 
} 
 
.nvgt:hover{ 
 
\t opacity: 0.9; 
 
} 
 
#prev{ 
 
\t background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center; 
 
\t left: 0px; 
 
} 
 
#next{ 
 
\t background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center; 
 
\t right: 0px; 
 
} 
 
h1.slideshowtitle{ 
 
    font-style: italic; 
 
    font-size: 50px; 
 
    font-family: cursive; 
 
    color: black; 
 

<h1> Silent Auction </h1> 
 

 

 
    <!-First Slideshow-> 
 
    <div class="container2"> 
 
     <div class="slider_wrapper"> 
 
     <ul id="image_slider"> 
 
      <li><img src=""></li> 
 
      <li><img src=""></li> 
 
      <li><img src=""></li> 
 
     </ul> 
 
     <span class="nvgt" id="prev"></span> 
 
     <span class="nvgt" id="next"></span> 
 
     </div> 
 
    </div> 
 
    <!-Second slide show -> 
 
    <div class="container2"> 
 
     <div class="slider_wrapper"> 
 
     <ul id="image_slider"> 
 
      <li><img src=""></li> 
 
      <li><img src=""></li> 
 
      <li><img src=""></li> 
 
     </ul> 
 
     <span class="nvgt" id="prev"></span> 
 
     <span class="nvgt" id="next"></span> 
 
     </div> 
 
    </div>

Answer 1

Ids sollte innerhalb des Dokuments eindeutig sein, aber Sie sind Styling w/id-Selektoren und mehrere Elemente mit derselben ID. Wechseln Sie zu Klassen. Z.B. -

Verwenden

class="image_slider" 

und

.image_slider { <yourcss> }