javascript - 具有导航和子导航功能的 jQuery slider

Question

目前我有一个 slider ，可以使用箭头和点进行导航。但是，我想在 slider 右侧添加一个附加组件，该组件充当多页目录，供 slider 通过在每个相应编号的页面中包含附加图像数组的编号页面进行选择。

我在将“01”页面链接到每个单独的图像数组时遇到问题。因此单击“01”、“02”、“03”将会将不同的图像数组集合放入 slider 中。相反，我现在的方式只是循环显示示例图像。

我添加了一个演示 http://jsfiddle.net/R77EB/3000/希望澄清任何令人困惑的事情，但是 jsfiddle 没有点导航操作，因为我似乎无法让它在 jsfiddle 上工作，但它在我的文本编辑软件中工作得很好。

实现这种效果最有效的方法是什么？

谢谢。

HTML

<div id="rectangle">
  <div class="nav">
    <ul>
       <li class="first"><a href="#">01</a></li>
       <li class="second"><a href="#">02</a></li>
       <li class="third"><a href="#">03</a></li>
    </ul>
 </div>
</div>
<div class="image-box">
  <img class="p-first" src="img/SampleImage.png" width="300" height="200">
  <img class="p-first" src="img/SampleImage.png" width="300" height="200">
  <img class="p-first" src="img/SampleImage.png" width="300" height="200">
</div>

<div class="image-box">
  <img class="p-second" src="img/SampleImage.png" width="300" height="200">
  <img class="p-second" src="img/SampleImage.png" width="300" height="200">
  <img class="p-second" src="img/SampleImage.png" width="300" height="200">
</div>

<div class="image-box">
  <img class="p-third" src="img/SampleImage.png" width="300" height="200">
  <img class="p-third" src="img/SampleImage.png" width="300" height="200">
  <img class="p-third" src="img/SampleImage.png" width="300" height="200">
</div>


<nav class="slider-nav">
  <div class="nav-list">
    <div class="nav-label">Digital</div>
      <div class="nav-dot select"></div>
         <div class="nav-dot"></div>
         <div class="nav-dot"></div>
         <div class="nav-dot"></div>
</div>
<div class="nav-spacing"></div>
   <div class="nav-list">
      div class="nav-label">Physical</div>
        <div class="nav-dot select"></div>
        <div class="nav-dot"></div>
        <div class="nav-dot"></div>
        <div class="nav-dot"></div>
  </div>
</nav>

jQuery

      $(document).ready(function () {
        $(".p-first, .p-second, .p-third").hide();
    });


    $(document).ready(function () {
        $(".first").click(function () {
            $(".p-first").toggle();
        });
    });

    $(document).ready(function () {
        $(".second").click(function () {
            $(".p-second").toggle();
        });
    });

    $(document).ready(function () {
        $(".third").click(function () {
            $(".p-third").toggle();
        });
    });

CSS

   #rectangle {
  position: absolute;
  top: 226px;
  left: 691px;
  height: 561px;
  width: 996px;
  border: 1px solid red;
  opacity: .5;
}

.nav {
  position: relative;
  top: 25px;
  left: 1006px;
}

li {
  list-style-type: none;
  padding: 2px;
}

a {
  text-decoration: none;
}

.image-box {
  position: absolute;
  top: 226px;
  left: 691px;
}

.slider-nav {
  position: relative;
  top: 800px;
  left: 800px;
  display: -webkit-flex;
  -webkit-flex-wrap: nowrap;
  -webkit-flex-direction: row;
  -webkit-justify-content: center;
  -webkit-align-content: stretch;
  -webkit-align-items: stretch;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.nav-label {
  margin-left: 5px;
  position: relative;
  bottom: 2px;
  font-size: 10px;
  color: gray;
  white-space: nowrap;
  font-family: 'Brandon Grotesque', sans-serif;
  font-weight: 400;
  font-size: 10px;
}

.nav-spacing {
  position: relative;
  top: 5px;
  width: 1px;
  height: 26px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #d8d8d8;
}

.nav-dot {
  width: 10px;
  height: 10px;
  margin-right: 3px;
  margin-left: 3px;
  padding: 0;
  display: inline-block;
  border-radius: 10px;
  background-color: #E6E7E8;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out
}

.nav-dot.select {
  border: 1px solid red;
}

.nav-dot:hover {
  border: 1px solid #202020;
}

Answer 1

我无法在堆栈溢出时得到回复。但我确实从另一个论坛获得了一些帮助来解决问题，您可以在此处阅读线程http://www.codingforums.com/javascript-frameworks/377190-jquery-slider-both-navigation-sub-navigation.html

HTML

<body>
<div class="my-slider" id="group1">
    <ul>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
    </ul>
</div>
<div class="my-slider" id="group2">
    <ul>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
    </ul>
</div>
<div class="my-slider" id="group3">
    <ul>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
        <li><img class="img-box" src="img/SampleImage.png"></li>
    </ul>
</div>


<nav class="nav-wrapper">
   <div class="first"><a data-id="group1" class="grpsel initial" href="#">01</a></div>
   <div class="second"><a data-id="group2" class="grpsel" href="#">02</a>     </div>
   <div class="third"><a data-id="group3" class="grpsel" href="#">03</a>   </div>
</nav>
</body>

jQuery

jQuery(document).ready(function ($) {
        $('.my-slider').unslider();
        $(".grpsel").on("click", function () {
            var grp = $(this).attr("data-id");
            $(".unslider").hide();
            $("#" + grp).parent().show();
        })
        $("a.initial").click();
    });

CSS

      body {
  }

  .my-slider {
      position: absolute;
      top: 226px;
      left: 691px;
      height: 561px;
      width: 996px;
      opacity: .5;
  }

  .img-box {
      max-height: 561px;
      max-width: 996px;
  }

  a {
      text-decoration: none;
  }

  .nav-wrapper {
      position: absolute;
      top: 250px;
      right: 200px;
  }

  .first,
  .second,
  .third {
      padding-bottom: 5px;
  }