javascript - 如何制作简单的画廊幻灯片

Question

我现在工作的公司正在制作网页模板。我是一名网页设计师。我想做一个简单的画廊幻灯片。我在互联网上搜索，比如 Youtube，在 stackoverflow 上发帖并逐渐写下自己。但现在我有一个问题。我不能让它滑动。

我的想法是： 单击#left-arrow时，向左移动一件，然后单击#right-arrow，向右移动一件。

如果:last-child，返回第一张图片。

并且在未来它将是响应式的。（在本节中，如果太难稍后再做）

请帮我

$(document).ready(function() {

  var page_body = $('#page-body').width();
  var width_li = 0;
  var margin_items_slide = 5;
  var items_show = 3;
  var calc_width_container = ((items_show * margin_items_slide) + page_body) - margin_items_slide;
  $(".container-slide").css('max-width', calc_width_container);
  $(".container-slide ul > li").css('width', page_body / items_show);
  $(".container-slide ul > li").css({marginRight: margin_items_slide + 'px'});
  $('.container-slide ul > li').each(function() {
    width_li += $(this).outerWidth(true);
  });
  $('.container-slide-overflow > ul').css('width', width_li + margin_items_slide);

  $('#right-arrow').on('click', function() {
  // even i can not make it
  });
  $('#left-arrow').on('click', function() {
// even i can not make it
  });



  $(window).resize(function() {
  var page_body = $('#page-body').width();
  var width_li = 0;
  var margin_items_slide = 5;
  var items_show = 3;
  var calc_width_container = ((items_show * margin_items_slide) + page_body) - margin_items_slide;
  $(".container-slide").css('max-width', calc_width_container);
  $(".container-slide ul > li").css('width', page_body / items_show);
  $(".container-slide ul > li").css({marginRight: margin_items_slide + 'px'});
  $('.container-slide ul > li').each(function() {
    width_li += $(this).outerWidth(true);
  });
  $('.container-slide-overflow > ul').css('width', width_li + margin_items_slide);

  $('#right-arrow').on('click', function() {
  // even i can not make it
  });
  $('#left-arrow').on('click', function() {
// even i can not make it
  });
  
 });
 
 
 
});

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#page-body {
  width: 350px;
  position: relative;
  min-height: 10px;
  margin-left: auto;
  margin-right: auto;
}

.container-slide ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.container-slide ul:before,
.container-slide ul:after {
  content: '';
  display: table;
}

.container-slide ul:after {
  clear: both;
}

.container-slide ul>li {
  float: left;
  background: orange;
  text-align: center;
  color: #ffffff;
  padding: 50px;
}

.container-slide-overflow {
  overflow: hidden;
}

.container-slide {
  position: relative;
}

.container-slide button {
  width: 30px;
  height: 30px;
  background: red;
  border: none;
  color: #ffffff;
  position: absolute;
  z-index: 999;
}

#left-arrow {
  left: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#right-arrow {
  right: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media(max-width:350px) {
  #page-body {
    width: 100%;
  }
  #left-arrow {
    left: 0px;
  }
  #right-arrow {
    right: 0px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="page-body">
  <div class="container-slide">
    <div class="container-slide-overflow">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
      </ul>
    </div>
    <div class="box-arrow-control">
      <button id="left-arrow">←&lt;/button>
      <button id="right-arrow">→&lt;/button>
    </div>
  </div>
</div>

标签： javascriptjqueryhtml

Answer 1

只是分享关于幻灯片的简单概念。您可以使用滑块的活动项目的索引。在这里，我active为当前显示的项目添加了类，当right-arrow单击时，我将第一个活动项目隐藏并在最后一个活动项目旁边显示项目。同样，当left-arrow单击时，我隐藏了最后一个活动项目，并显示了第一个活动项目之前的项目。希望它有助于理解这个概念。

$(document).ready(function() {

  var page_body = $('#page-body').width();
  var width_li = 0;
  var margin_items_slide = 5;
  var items_show = 3;
  var calc_width_container = ((items_show * margin_items_slide) + page_body) - margin_items_slide;
  $(".container-slide").css('max-width', calc_width_container);
  $(".container-slide ul > li").css('width', page_body / items_show);
  $(".container-slide ul > li").css({marginRight: margin_items_slide + 'px'});
  $('.container-slide ul > li').each(function() {
    width_li += $(this).outerWidth(true);
  });
  $('.container-slide-overflow > ul').css('width', width_li + margin_items_slide);

  $('#right-arrow').on('click', function() {
  // even i can not make it  
    if ($('li.active').last().next().length > 0){
      $('li.active').first().hide();
      $('li.active').first().removeClass('active');
      $('li.active').last().next().show();
      $('li.active').last().next().addClass('active');
    }
  });
  $('#left-arrow').on('click', function() {
  // even i can not make it
  if ($('li.active').first().prev().length > 0){
    $('li.active').first().prev().show();
    $('li.active').first().prev().addClass('active');
    $('li.active').last().hide();
    $('li.active').last().removeClass('active');
  }
  });



  $(window).resize(function() {
  var page_body = $('#page-body').width();
  var width_li = 0;
  var margin_items_slide = 5;
  var items_show = 3;
  var calc_width_container = ((items_show * margin_items_slide) + page_body) - margin_items_slide;
  $(".container-slide").css('max-width', calc_width_container);
  $(".container-slide ul > li").css('width', page_body / items_show);
  $(".container-slide ul > li").css({marginRight: margin_items_slide + 'px'});
  $('.container-slide ul > li').each(function() {
    width_li += $(this).outerWidth(true);
  });
  $('.container-slide-overflow > ul').css('width', width_li + margin_items_slide);

  $('#right-arrow').on('click', function() {
  // even i can not make it
  });
  $('#left-arrow').on('click', function() {
// even i can not make it
  });
  
 });
 
 
 
});

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#page-body {
  width: 350px;
  position: relative;
  min-height: 10px;
  margin-left: auto;
  margin-right: auto;
}

.container-slide ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.container-slide ul:before,
.container-slide ul:after {
  content: '';
  display: table;
}

.container-slide ul:after {
  clear: both;
}

.container-slide ul>li {
  float: left;
  background: orange;
  text-align: center;
  color: #ffffff;
  padding: 50px;
}

.container-slide-overflow {
  overflow: hidden;
}

.container-slide {
  position: relative;
}

.container-slide button {
  width: 30px;
  height: 30px;
  background: red;
  border: none;
  color: #ffffff;
  position: absolute;
  z-index: 999;
}

#left-arrow {
  left: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#right-arrow {
  right: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media(max-width:350px) {
  #page-body {
    width: 100%;
  }
  #left-arrow {
    left: 0px;
  }
  #right-arrow {
    right: 0px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="page-body">
  <div class="container-slide">
    <div class="container-slide-overflow">
      <ul>
        <li class="active">1</li>
        <li class="active">2</li>
        <li class="active">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
      </ul>
    </div>
    <div class="box-arrow-control">
      <button id="left-arrow">←&lt;/button>
      <button id="right-arrow">→&lt;/button>
    </div>
  </div>
</div>

根据幻灯片项目的宽度滑动。

$(document).ready(function() {

  var page_body = $('#page-body').width();
  var width_li = 0;
  var margin_items_slide = 5;
  var items_show = 3;
  var calc_width_container = ((items_show * margin_items_slide) + page_body) - margin_items_slide;
  $(".container-slide").css('max-width', calc_width_container);
  $(".container-slide ul > li").css('width', page_body / items_show);
  $(".container-slide ul > li").css({marginRight: margin_items_slide + 'px'});
  $('.container-slide ul > li').each(function() {
    width_li += $(this).outerWidth(true);
  });
  $('.container-slide-overflow > ul').css('width', width_li + margin_items_slide);

  $('#right-arrow').on('click', function() {
  // even i can not make it  
    if ($('li.active').last().next().length > 0){
      $('li.active').first().removeClass('active');
      $('li.active').last().next().addClass('active');
      var prevmargin = $("ul").css("margin-left").replace(/[^-\d\.]/g, '');
      var newmargin = prevmargin - ($('li').outerWidth() + 5);
      $('ul').css({"margin-left": newmargin});
      
    }
  });
  $('#left-arrow').on('click', function() {
  // even i can not make it
  if ($('li.active').first().prev().length > 0){
    $('li.active').first().prev().addClass('active');
    $('li.active').last().removeClass('active');
    var prevmargin = $("ul").css("margin-left").replace(/[^-\d\.]/g, '');
    var newmargin = prevmargin + ($('li').outerWidth() + 5);
    $('ul').css({"margin-left": newmargin});
  }
  });



  $(window).resize(function() {
  var page_body = $('#page-body').width();
  var width_li = 0;
  var margin_items_slide = 5;
  var items_show = 3;
  var calc_width_container = ((items_show * margin_items_slide) + page_body) - margin_items_slide;
  $(".container-slide").css('max-width', calc_width_container);
  $(".container-slide ul > li").css('width', page_body / items_show);
  $(".container-slide ul > li").css({marginRight: margin_items_slide + 'px'});
  $('.container-slide ul > li').each(function() {
    width_li += $(this).outerWidth(true);
  });
  $('.container-slide-overflow > ul').css('width', width_li + margin_items_slide);

  $('#right-arrow').on('click', function() {
  // even i can not make it
  });
  $('#left-arrow').on('click', function() {
// even i can not make it
  });
  
 });
 
 
 
});

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#page-body {
  width: 350px;
  position: relative;
  min-height: 10px;
  margin-left: auto;
  margin-right: auto;
}

.container-slide ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.container-slide ul:before,
.container-slide ul:after {
  content: '';
  display: table;
}

.container-slide ul:after {
  clear: both;
}

.container-slide ul>li {
  float: left;
  background: orange;
  text-align: center;
  color: #ffffff;
  padding: 50px;
}

.container-slide-overflow {
  overflow: hidden;
}

.container-slide {
  position: relative;
}

.container-slide button {
  width: 30px;
  height: 30px;
  background: red;
  border: none;
  color: #ffffff;
  position: absolute;
  z-index: 999;
}

#left-arrow {
  left: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#right-arrow {
  right: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media(max-width:350px) {
  #page-body {
    width: 100%;
  }
  #left-arrow {
    left: 0px;
  }
  #right-arrow {
    right: 0px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="page-body">
  <div class="container-slide">
    <div class="container-slide-overflow">
      <ul>
        <li class="active">1</li>
        <li class="active">2</li>
        <li class="active">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
      </ul>
    </div>
    <div class="box-arrow-control">
      <button id="left-arrow">←&lt;/button>
      <button id="right-arrow">→&lt;/button>
    </div>
  </div>
</div>