使用HTML CSS的時間軸滑塊Javascript

Question

我想製作一個時間軸滑塊，但我很困惑，因爲我是一個新手。

要求：

1. 它必須有15個項目。

2. 兩個滑塊按鈕（左和右）。

3. 一次顯示五週。

我該怎麼做？

我可以創建列表，但我不知道如何隱藏除想顯示的元素之外的元素。我如何給列表的每個元素賦予寬度。

Answer 1

我得到了你想要的東西使用此代碼段爲一個簡單的滑塊：Very Simple Slider

jQuery(document).ready(function ($) { 
 

 
\t $('#checkbox').change(function(){ 
 
\t  setInterval(function() { 
 
\t   moveRight(); 
 
\t  }, 3000); 
 
\t }); 
 
\t 
 
\t \t var slideCount = $('#slider > ul > li').length; 
 
\t \t var slideWidth = $('#slider > ul > li').width(); 
 
\t \t var slideHeight = $('#slider > ul > li').height(); 
 
\t \t var sliderUlWidth = slideCount * slideWidth; 
 
\t \t 
 
\t \t $('#slider').css({ width: slideWidth, height: slideHeight }); 
 
\t \t 
 
\t \t $('#slider > ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 
 
\t \t 
 
\t  $('#slider > ul > li:last-child').prependTo('#slider > ul'); 
 

 
\t  function moveLeft() { 
 
\t   $('#slider > ul').animate({ 
 
\t    left: + slideWidth 
 
\t   }, 200, function() { 
 
\t    $('#slider > ul > li:last-child').prependTo('#slider > ul'); 
 
\t    $('#slider > ul').css('left', ''); 
 
\t   }); 
 
\t  }; 
 

 
\t  function moveRight() { 
 
\t   $('#slider > ul').animate({ 
 
\t    left: - slideWidth 
 
\t   }, 200, function() { 
 
\t    $('#slider > ul > li:first-child').appendTo('#slider > ul'); 
 
\t    $('#slider > ul').css('left', ''); 
 
\t   }); 
 
\t  }; 
 

 
\t  $('a.control_prev').click(function() { 
 
\t   moveLeft(); 
 
\t  }); 
 

 
\t  $('a.control_next').click(function() { 
 
\t   moveRight(); 
 
\t  }); 
 

 
\t });

html { 
 
    border-top: 5px solid #fff; 
 
    background: #58DDAF; 
 
    color: #2a2a2a; 
 
} 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Open Sans'; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
    text-align: center; 
 
    font-weight: 300; 
 
} 
 

 
#slider { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 20px auto 0 auto; 
 
    border-radius: 4px; 
 
} 
 

 
#slider > ul { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 200px; 
 
    list-style: none; 
 
} 
 

 
#slider > ul > li { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 500px; 
 
    height: 300px; 
 
    background: #ccc; 
 
    text-align: center; 
 
    line-height: 300px; 
 
} 
 

 
a.control_prev, a.control_next { 
 
    position: absolute; 
 
    top: 40%; 
 
    z-index: 999; 
 
    display: block; 
 
    padding: 4% 3%; 
 
    width: auto; 
 
    height: auto; 
 
    background: #2a2a2a; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    opacity: 0.8; 
 
    cursor: pointer; 
 
} 
 

 
a.control_prev:hover, a.control_next:hover { 
 
    opacity: 1; 
 
    -webkit-transition: all 0.2s ease; 
 
} 
 

 
a.control_prev { 
 
    border-radius: 0 2px 2px 0; 
 
} 
 

 
a.control_next { 
 
    right: 0; 
 
    border-radius: 2px 0 0 2px; 
 
} 
 

 
.slider_option { 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 160px; 
 
    font-size: 18px; 
 
} 
 

 
#slider ul ul li { 
 
line-height: 3em; 
 
    border-bottom: 1px dashed; 
 
} 
 

 
#slider ul ul { 
 
    line-height: 1em; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider"> 
 
    <a href="#" class="control_next">&gt;</a> 
 
    <a href="#" class="control_prev">&lt;</a> 
 
    <ul> 
 
    <li> 
 
\t <ul id="slide1"> 
 
\t <li>Week 1</li> 
 
\t <li>Week 2</li> 
 
\t <li>Week 3</li> 
 
\t <li>Week 4</li> 
 
\t <li>Week 5</li> 
 
\t </ul> 
 
    </li> 
 
    <li style="background: #aaa;"> 
 
\t <ul id="slide2"> 
 
\t <li>Week 6</li> 
 
\t <li>Week 7</li> 
 
\t <li>Week 8</li> 
 
\t <li>Week 9</li> 
 
\t <li>Week 10</li> 
 
\t </ul> 
 
    </li> 
 
    <li> 
 
\t <ul id="slide3"> 
 
\t <li>Week 11</li> 
 
\t <li>Week 12</li> 
 
\t <li>Week 13</li> 
 
\t <li>Week 14</li> 
 
\t <li>Week 15</li> 
 
\t </ul> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="slider_option"> 
 
    <input type="checkbox" id="checkbox"> 
 
    <label for="checkbox">Autoplay Slider</label> 
 
</div>

Answer 2

如果你有一個圖像列表讓說你有15幅圖像的列表，每個圖像是具有類abcdclass那麼你可以做一些這樣想給出的代碼一個div內。這將在3秒後滑動。

<script> 
           $(function() { 

            var slides = $(".abcdclass"); 
            var totalslides = slides.length - 1; 
            var totalnumberofslides = slides.length - 1; 

            setInterval(function() { 

             var jsonCSS = { 
              width: "0", 
              opacity: "0", 
              bottom: "0px", 
             }; 

             $(".abcdclass").eq(totalslides).animate(jsonCSS, 2000); 



             if (totalslides <= 0) { 
              $(".abcdclass").animate({ 
               width: "100%", 
               opacity: "1", 
               height: "100%" 
              }, 500); 
              totalslides = totalnumberofslides; 
             } else { 
              totalslides--; 
             } 

            }, 3000); 


           }); 
          </script> 

Answer 3

試試這個，我已經經歷過並使用過它。它爲我

https://codyhouse.co/demo/horizontal-timeline/index.html