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

Question

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

我的想法是： 点击＃左箭头后，向左移动一个并点击＃右箭头，向右移动一个。

如果：last-child ，请回到第一张图片。

将来它会有回应。（在本节中，如果以后太困难了）

请帮帮我

＆＃13;

＆＃13;

$(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
  });
  
 });
 
 
 
});

＆＃13;

* {
  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;
  }
}

＆＃13;

<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">←</button>
      <button id="right-arrow">→</button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

$(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
  });
  
 });
 
 
 
});

＆＃13;

* {
  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;
  }
}

＆＃13;

<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">←</button>
      <button id="right-arrow">→</button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

$(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
  });
  
 });
 
 
 
});

＆＃13;

* {
  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;
  }
}

＆＃13;

<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">←</button>
      <button id="right-arrow">→</button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

 Try this it will work fine according to your requirement

＆＃13;

＆＃13;

$(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);

				$(".container-slide ul li").eq(0).addClass("active");
				var liWidth = $(".container-slide ul").width() / $(".container-slide ul li").length;

				$('#right-arrow').on('click', function() {
					if ($(".container-slide ul li").length - items_show > $(".container-slide ul li.active").index()) {

						setLiWidth = liWidth * ($(".container-slide ul li.active").index() + 1);
						
						$(".container-slide ul li.active").next("li").addClass("active");
						$(".container-slide ul li.active").eq(0).removeClass("active")
						$(".container-slide ul").animate({
							left : -setLiWidth
						}, 1000)
					} else {
						$(".container-slide ul li").eq(0).addClass("active").siblings("li").removeClass("active");
						$(".container-slide ul").animate({
							left : 0
						}, 1000)
					}

				});

				$('#left-arrow').on('click', function() {

					if (0 < $(".container-slide ul li.active").index()) {

						setLiWidth = liWidth * ($(".container-slide ul li.active").index() - 1);
						
						$(".container-slide ul li.active").prev("li").addClass("active");
						$(".container-slide ul li.active").eq(1).removeClass("active")
						$(".container-slide ul").animate({
							left : -setLiWidth
						}, 1000)
					} else {
						$(".container-slide ul li").eq($(".container-slide ul li").length - items_show).addClass("active").siblings("li").removeClass("active");
						setLiWidth = liWidth * ($(".container-slide ul li.active").index());
						$(".container-slide ul").animate({
							left : -setLiWidth
						}, 1000)
					}
				});

				$(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
					});

				});

			});

＆＃13;

		* {
				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;
				position: relative;
			}

			.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;
				}
			}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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">
						←
					</button>
					<button id="right-arrow">
						→
					</button>
				</div>
			</div>
		</div>

＆＃13;

＆＃13;

＆＃13;