HTML/Webpage 的幻灯片（多个）

Question

我正在尝试将两个幻灯片放映在同一页面上，这两个幻灯片将由相同的 css 和 java 脚本运行。我的问题是我似乎无法弄清楚为什么我的第二张幻灯片将其中一张图片推下。请注意照片中的第二张幻灯片将白色圆圈的图像垂直向下推到页面的左侧。如果有人能解释我做错了什么，我将不胜感激以及任何其他建议！谢谢

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

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

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

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

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

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

    window.onload = init;
    </script>

    /* Silent Auction */
/* SLIDESHOW */

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

 position: relative;
 height: auto;
 list-style: none;
 overflow: hidden;
 float: left;
 /*Chrom default padding for ul is 40px */
 padding:0px;
 margin:0px;
}
#image_slider li{
 position: relative;
 float: left;
}
.nvgt{
 position:absolute;
 top: 120px;
 height: 50px;
 width: 30px;
 opacity: 0.6;
}
.nvgt:hover{
 opacity: 0.9;
}
#prev{
 background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
 left: 0px;
}
#next{
 background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
 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

ID 在文档中应该是唯一的，但是您正在使用 ID 选择器和具有相同 ID 的多个元素来设置样式。切换到类。例如。 -

使用

class="image_slider"

和

.image_slider { <yourcss> }

HTML/Webpage 的幻灯片（多个）

Slideshows(Multiple) for HTML/Webpage

html

javascript

css

webpage

slideshow