Question

所以，在Mohamed-Yousef和Rachel的帮助之后，我设法以一种好的方式编辑我的剧本。现在一切正常。谢谢你们俩。我的问题是如何制作幻灯片导航栏。因此，上面的代码是幻灯片导航栏的代码

SCRIPT

$(document).ready(function() {
  var pages = $('#container li'),
    current = 0;
  var currentPage, nextPage;

  $('#container .button').click(function() {
    currentPage = pages.eq(current);
    if ($(this).hasClass('prevButton')) {

      if (current <= 0)
        current = pages.length - 5;
      else
        current = current - 1;
    } else {
      if (current >= pages.length - 1)
        current = 0;
      else
        current = current + 5;
    }
    nextPage = pages.eq(current);
    pages.hide();
    nextPage.show();
  }).filter('.nextButton').click();
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="header" id="home">

  <div class="header-top">
    <div class="container">
      <div class="logo">
        <a href="index.html"><img src="images/logo.png"></a>
      </div>
      <div class="top-menu">
        <span class="menu"> </span>
        <div id="container">
          <ul>
            <li><a href="#about" class="scroll">Proiecte</a>
            <li> <a href="#trainers" class="scroll">Eustiu</a>
            <li> <a href="#testimonial" class="scroll">Altceva</a>
            <li> <a href="/login">Haisavedem</a>
            <li> <a href="#" class="dropbtn">Cecacat</a> </li>
            <li><a href="#about " class="scroll ">Prezentare</a>
              <a href="#trainers " class="scroll ">Resurse Umane</a>
              <a href="#testimonial " class="scroll ">Bacalaureat</a>
              <a href="/login ">Contacteaza-ne</a>
              <a href="# " class="dropbtn">Altele</a></li>
            <li><a href="#about" class="scroll">11</a>
              <a href="#trainers" class="scroll">12</a>
              <a href="#testimonial" class="scroll">13</a>
              <a href="/login">14</a>
              <a href="#" class="dropbtn">15</a></li>

            <button class="button prevButton ">⟵</button>
            <button class="button nextButton ">⟶</button>

Answer 1

我有一个工作演示;它是一项正在进行中的工作（因为我还没有想过如何设置默认列表？）但是我想我还是会发布它。关键是使用jquery .slice方法将列表切割成5个块。

请参阅代码段或fiddle

＆＃13;

$('#less').on('click', function() {
  prevpage = $('li:visible:first').index() - 5;
  if (prevpage >= $('li').length) {
    prevpage = 0;
  }
  $('li').hide();
  $toShow = $('li:hidden').slice(prevpage, prevpage + 5);
  $toShow.show();
});
$('#next').on('click', function() {
  thispage = $('li:visible:last').index() + 1;
  if (thispage >= $('li').length) {
    thispage = 0;
  }
  $('li').hide();
  $toShow = $('li:hidden').slice(thispage, thispage + 5);
  $toShow.show();
});

＆＃13;

ul {
  list-style-type: none;
}

li {
  display: none;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="next">Next 5</button>
<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>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>
<button id="less">Prev 5</button>

＆＃13;

幻灯片正在删除网站上的部分文字

1 个答案: