Question

我希望每个人都能为我提供帮助，我在用HTML和CSS创建包含200多个幻灯片的滑块时遇到了困难，也感到厌倦。

我想用200张幻灯片html＆css创建幻灯片

index.html

css / style.css

js / scripts.js

img /

幻灯片/

1.html＆1.css
2.html＆2.css
3.html＆3.css

......

200.html和200.css

我的索引

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <link href="./css/style.css" rel="stylesheet" />
   <title>Slider Page Simulator</title>
</head>
 <style>
 
 </style>
<body>
<div class="wrap">
   <div id="slides">
      <!-- load in slides -->
   </div>
</div>  
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript"  src="./js/mysliders.js"></script>
</html>

我的jQuery

var Slides = {
   container : $('#slides'),
 
   totalSlides : '',
 
   translateAmount : 0,
 
   currentSlide : 0,
 
   slideWidth : '',
 
   init : function(totalSlides) {
      var each;
 
      if ( !totalSlides ) throw new Error('Please pass the total number of slides.');
      Slides.totalSlides = totalSlides;
 
      Slides.loadContent();
 
      each = Slides.container.children('div');
       
      // Determine the width of our canvas
      Slides.slideWidth = each.width() + ( parseInt( each.css('margin-right'), 10 ) );
 
      Slides.keyPress();
   },
 
   loadContent : function() {
      Slides.container.hide();
      for ( var i = 0; i < Slides.totalSlides; i++ ) {
         $('<div id="#slide-' + i + '"></div>')
            .load('.slides/' + i + '.html')
            .appendTo(Slides.container);
         }
      Slides.container.show();
   },
 
   keyPress : function() {
      $(document.body).keydown(function(e) {
         // if left or right arrow key is pressed
         if ( e.keyCode === 39 || e.keyCode === 37 ) {
            e.preventDefault();
            ( e.keyCode === 39 ) ? Slides.next() : Slides.prev();
         }
      });
   },
 
   next : function( ) {
      Slides.translateAmount -= Slides.slideWidth;
      Slides.updateHash( ++Slides.currentSlide );
      Slides.animate();
   },
 
  prev : function() {
     // No more left to go back.
      if ( Slides.translateAmount === 0 ) return;
 
      Slides.translateAmount += Slides.slideWidth;
      Slides.updateHash( --Slides.currentSlide );
      Slides.animate();
  },
 
  animate : function() {
     Slides
      .container
      .children()
         .css( '-webkit-transform', 'translateX(' + Slides.translateAmount + 'px)' );
  },
 
  updateHash : function( direction ) {
     // Update current Slides and hash.
     location.hash = '#slide-' + Slides.currentSlide;
  }
};
 
// All right; let's do this. 
Slides.init(6);

非常感谢

如何使用200页HTML和CSS创建演示幻灯片

0 个答案: