jquery - 如何使用轮播隐藏和显示背景图像？

Question

我真的是 j-query 的新手。这可能很尴尬，但我在寻找如何使用完整背景图像创建 slider 图像轮播时遇到了很多麻烦。我看过其他解决方案，但似乎您必须为要滑动的所有图片的大小设置固定宽度(例如 div 宽度为 9000px)。但是，我觉得我可以使用某种类型的数组或索引函数，在其中我可以用循环迭代某些东西来隐藏和显示。从基本的 javascript 到 jquery 的过渡是我难以调整的。如果有人能给我一些建议或提示，那就太好了。下面是我的代码。谢谢

http://codepen.io/kevk87/pen/PPNPmg

    <main>

<div class="container">
<ul>  
  <li class="one"> 
  </li>
  <li class="two"> </li>
  <li class="three"></li>
  <li class="four"></li>
</ul>

  <div class="nav">
      <ul >
       <li class="first active"> </li>
      <li class="second"> </li>
       <li class="third"> </li>
      <li class="fourth"> </li>
      </ul>
  </div>
</div>
</ul>
</main>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



ul {
  list-style:none;
  height:100%;
}
main, html, body{
  height:100%;
}

.container {
  height:100%;
  postion:relative;

}

.one {  
   height:100%;   background:url(http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg) center center no-repeat fixed; 
   background-size:cover;

}  

.two {
  background: url(http://www.atilaminates.com/wp-content/uploads/2015/05/nature-wlk.jpeg) center center no-repeat fixed;
  height:100%; 
}
.three {
  background: url(http://php.drishinfo.com/photostudioone/wp-content/uploads/2014/11/nature-wallpaper-hd-1920x1080.jpg) center center no-repeat fixed;
  height:100%; 
}
.four {
  background: url(http://www.projecthappyhearts.com/wp-content/uploads/2015/04/green-nature-dual-monitor-other.jpg) center center no-repeat fixed;
  height:100%; 
}


.nav ul li {
  width:20px;
  background-color:white;
  height:20px;
  display:inline-block;
  margin-right:20px; 
}
.nav ul li:last-child {
  margin-right:0px;
}

.nav {
  position: absolute;
  bottom:100px;
  left:50%;
  transform:translate(-50%,-50%);
}

.nav ul .active{
  background-color:black;
}

.two, .three, .four {
  display:none;
}

Javascript

//change active class

    $('.nav ul').click(function(){
  $(this).removeClass('active');  
    $(this).addClass('active');
});

//Click handlers to change image and active class


$('.first').click(function(){
    $('.one').show();
  $('.two').hide();
  $('.three').hide();
  $('.four').hide();
});


$('.second').click(function(){
    $('.two').show();
  $('.one').hide();
  $('.three').hide();
  $('.four').hide();
});

$('.third').click(function(){
    $('.three').show();
  $('.one').hide();
  $('.two').hide();
  $('.four').hide();
});

$('.fourth').click(function(){
    $('.four').show();
  $('.one').hide();
  $('.three').hide();
  $('.two').hide();
});

Answer 1

给你。使用 jquery 函数的漂亮且简化的版本。

http://jsfiddle.net/7erakxad/

  <main>

<div class="container">
<ul>  
  <li class="one"> 
  </li>
  <li class="two"> </li>
  <li class="three"></li>
  <li class="four"></li>
</ul>

  <div class="nav">
      <ul >
       <li class="first active"> </li>
      <li class="second"> </li>
       <li class="third"> </li>
      <li class="fourth"> </li>
      </ul>
  </div>
</div>
</ul>
</main>


 <script>
  $(".nav > ul li").click(function () {
        $('.nav > ul li').each(function () {
            $(this).removeClass('active');       
        });
        var index = $(this).index();
        $(".container > ul").find("li").each(function (i2) {
            if (index == $(this).index())
                $(this).show();
            else
                $(this).hide();
        });
        $(this).addClass('active');
    });



 </script>

   <style>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



ul {
  list-style:none;
  height:100%;
}
main, html, body{
  height:100%;
}

.container {
  height:100%;
  postion:relative;

}

.one {  
   height:100%;   background:url(http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg) center center no-repeat fixed; 
   background-size:cover;

}  

.two {
  background: url(http://www.atilaminates.com/wp-content/uploads/2015/05/nature-wlk.jpeg) center center no-repeat fixed;
  height:100%; 
}
.three {
  background: url(http://php.drishinfo.com/photostudioone/wp-content/uploads/2014/11/nature-wallpaper-hd-1920x1080.jpg) center center no-repeat fixed;
  height:100%; 
}
.four {
  background: url(http://www.projecthappyhearts.com/wp-content/uploads/2015/04/green-nature-dual-monitor-other.jpg) center center no-repeat fixed;
  height:100%; 
}


.nav ul li {
  width:20px;
  background-color:white;
  height:20px;
  display:inline-block;
  margin-right:20px; 
}
.nav ul li:last-child {
  margin-right:0px;
}

.nav {
  position: absolute;
  bottom:100px;
  left:50%;
  transform:translate(-50%,-50%);
}

.nav ul .active{
  background-color:black;
}

.two, .three, .four {
  display:none;
}


  </style>