带有导航和子导航的 jQuery 滑块答案

【问题标题】：jQuery slider with both navigation and sub navigation带有导航和子导航的 jQuery 滑块
【发布时间】：2016-05-19 09:15:51
【问题描述】：

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

我无法将“01”页面链接到每个单独的图像数组。因此，单击“01”、“02”、“03”将是一组不同的图像集合到滑块中。而是我现在拥有的方式，它只是循环浏览示例图像。

我添加了一个演示 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;
}

【问题讨论】：

你试过这个链接吗？ slidesjs.com 很容易设置
我的滑块可以工作，我只是想添加额外的功能。基本上我正在建立一个投资组合网站，因此我会有很多图像。我希望能够将图像分类到单独的页面中，而不是在一个滑块中一次显示它们。

标签： javascript jquery html css slider

【解决方案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;
  }

【讨论】：