使用单个JavaScript声明的幻灯片会从多个file.js和.each（）中调用file.js？

Question

我想创建HTML和CSS加载形式为多file.js和file.css的幻灯片

例如，我有一些编号的.JS和CSS文件，并将它们放置在幻灯片和样式目录中，如下所示： 可以单击幻灯片功能播放每张幻灯片，用户可以按下一页和上一页简单地查看每张幻灯片

  

我的幻灯片的示例图片

  

示例HTML

 <div class="wrap">
   <div id="slides">
      <!-- load in slides form a file.js -->
   </div>
 </div>  

  

JS示例

loadContent : function() {
      Slides.container.hide();
      for ( var i = 0; i < Slides.totalSlides; i++ ) {
         $('<div id="#slide-' + i + '"></div>')
            .load('.slides/' + i + '.js')
            .appendTo(Slides.container);
         }
      Slides.container.show();
   },

将控件滑动到按钮“下一个”和“上一个” 我的例子：

var each;
     
          if ( !totalSlides ) throw new Error('Please pass the total number of slides.');
          Slides.totalSlides = totalSlides;
     
    		Slides.loadContent('slides/slide'+Slides.Slideindex+'.js');
    		
    	  var nextbutton = document.getElementById('next');
    	  var prebutton = document.getElementById('pre');
    	  nextbutton.addEventListener('click',function(){
    		  Slides.Slideindex++;
    			Slides.loadContent('slides/slide'+Slides.Slideindex+'.js');
    	  })
    	  prebutton.addEventListener('click',function(){
    		  Slides.Slideindex--;
    			Slides.loadContent('slides/slide'+Slides.Slideindex+'.js');
    	  })
          each = Slides.container.children('div');
           
          // Determine the width of our canvas
          Slides.slideWidth = each.width() + ( parseInt( each.css('margin-right'), 10 ) );
     
          Slides.keyPress();
       },

好的；我们开工吧。

Slides.init(160); //call 160 file.js