HTML/Webページのスライドショー（複数）

Question

同じページに2つのスライドショーを配置しようとしていますが、どちらも同じCSSとJavaスクリプトで実行されます。私の問題は、なぜ私の2番目のスライドショーが画像の1つを押し下げているのか分かりません。写真では、2番目のスライドショーが、白い円のイメージを垂直方向に、ページの左にプッシュしていることに注意してください。誰かが私が間違ったことを説明できるなら、私はそれと他のアドバイスにも感謝します！ Idsは、文書内で一意である必要がありますが、あなたは、ワット/ IDセレクタと同じIDを持つ複数の要素をスタイリングしている

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

ありがとうございます。クラスに切り替えます。例えば。 -

使用

class="image_slider" 

と

.image_slider { <yourcss> }