如何使用傳送帶隱藏並顯示背景圖像？

Question

我對j查詢非常陌生。這可能相當尷尬，但我很難找到如何使用完整背景圖像創建滑塊圖像旋轉木馬。我已經看過其他的解決方案，但是它看起來像你必須有一個固定寬度的所有圖片的大小，你想要滑動（例如9000像素的div寬度）。不過，我覺得我可以使用某種類型的數組或索引函數，我可以用循環來迭代某些東西來隱藏和顯示。從基本的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>