Question

我只使用无序列表 - http://codepen.io/celicoo/pen/ZYPBem

制作了此滑块

现在我正在尝试应用javascript，但是我无法通过导航更改滑块。我试图将为5000选择的幻灯片的z-index更改为1，但是其他工作无效：

$(document).ready(function(){
  $('.hero-slider-navbar_item').on('click', function(e) {
    e.preventDefault();
    var target = $(this).data('slider');

    var actual = $('.hero-slider_item.' + actual);
    var notActual = $('.hero-slider_item').not(actual);

    actual.css('z-index', '5000');
    notActual.css('z-index', '1');

  })

});

我在这里做错了什么？

更新：

HTML：

<main>
    <section class="hero">
            <ul class="hero-slider">
                    <li class="hero-slider_item one active">
                        <div class="container">
                                <h2 class="hero-slider_title">Test</h2>
                                <h3 class="hero-slider_subtitle">test</h3>
                            <p class="hero-slider_legend">algo</p>
                        </div>
                    </li>
                    <li class="hero-slider_item two">
                        <div class="container">
                                <h2 class="hero-slider_title">Test</h2>
                                <h3 class="hero-slider_subtitle">test</h3>
                                <p class="hero-slider_legend">algo</p>
                        </div>  
                    </li>
                    <li class="hero-slider_item three">
                        <div class="container">
                                <h2 class="hero-slider_title">Test</h2>
                                <h3 class="hero-slider_subtitle">test</h3>
                                <p class="hero-slider_legend">algo</p>
                        </div>
                    </li>
            </ul>
            <nav class="hero-slider-navbar">
     <div class="container">
                      <ul class="hero-slider-navbar_nav" role="navigation">
                          <li class="hero-slider-navbar_item" data-slider="one" ></li>
                            <li class="hero-slider-navbar_item" data-slider="two" ></li>
                            <li class="hero-slider-navbar_item" data-slider="three" ></li>
                      </ul>
    </div>
            </nav>
    </section>
    <!-- End hero -->
</main>

CSS：

body {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6, ul {
  padding: 0;
  margin: 0;
}
.container {
  padding-left: 2%;
  padding-right: 2%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.hero {
  width: 100%;
  height: 100vh;
}
.hero-slider {
  width: 100%;
  height: 100%;
  list-style: none;
}
.hero-slider_item {
  width: 100%;
  height: 100%;
  position: absolute;
}
.hero-slider_item.one {
  background: red;
  z-index: 3;
}
.hero-slider_item.two {
  background: yellow;
  z-index: 2;
}
.hero-slider_item.three{
  background: green;
  z-index: 1;
}
.hero-slider-navbar {
  position: relative;
  bottom: 20px;
  z-index: 9999;
  width: 100%;
}
.hero-slider-navbar_nav {
  text-align: center;
}
.hero-slider-navbar_item {
  list-style: none;
  display: inline-block;
  background: black;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  cursor: pointer;
}

Answer 1

所以，你走了。你快到了。让它工作的时候，我只改进了一些代码。

演示@ Code Pen

$(function() {
    $('.hero-slider-navbar_item').on('click', function(e) {
      e.preventDefault();
      var target = $(this).data('slider');
      //Item corresponding to the clicked element
      var actual = $(['.hero-slider_item', '.', target].join(''));
      //And it's siblings
      var others = actual.siblings();
      actual.css('z-index', '5000');
      others.css('z-index', '1');
    });
});

另一种不需要数据滑块的方法：

演示@ Code Pen

$(function() {
    $('.hero-slider-navbar_item').on('click', function(e) {
      e.preventDefault();
      $('.hero-slider_item').eq($(this).index()).siblings().css({
        'z-index': 1
      }).end().css({
        'z-index': 10
      });
    });
});

使用javascript添加滑块导航

1 个答案: