Question

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

我无法连接＆＃34; 01＆＃34;页面到那里每个单独的图像阵列。因此，点击＆＃34; 01＆＃34;，＆＃34; 02＆＃34;，＆＃34; 03＆＃34;将是一组图像的不同集合到滑块中。而是我现在拥有的方式，只是循环通过样本图像。

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

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

1 个答案: