HTML /网页的幻灯片（多个）

Question

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

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

＆＃13;

＆＃13;

<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>

＆＃13;

    /* 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;
  

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Ids在文档中应该是唯一的，但是你要使用id选择器和具有相同id的多个元素进行样式设置。切换到课程。例如。 -

使用

class="image_slider"

和

.image_slider { <yourcss> }