修改簡單滑塊

Question

我使用這個非常基本的滑塊，它的工作原理應該如此 - 但是當頁面上有多個滑塊時，當單擊右側或左側按鈕時，它們都會同時滑動。

我該如何使這些獨特的每一個？

欣賞給予

感謝您的幫助

工作實例可以在這裏找到 - >https://codepen.io/zuraizm/pen/vGDHl < - 基於HTML

jQuery(document).ready(function ($) { 
 
    $('#checkbox').change(function(){ 
 
    setInterval(function() { 
 
     moveRight(); 
 
    }, 3000); 
 
    }); 
 

 
    var slideCount = $('#slider ul li').length; 
 
    var slideWidth = $('#slider ul li').width(); 
 
    var slideHeight = $('#slider ul li').height(); 
 
    var sliderUlWidth = slideCount * slideWidth; 
 

 
    $('#slider').css({ width: slideWidth, height: slideHeight }); 
 
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 
 
    $('#slider ul li:last-child').prependTo('#slider ul'); 
 

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

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

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

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

 
});

#slider { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 20px auto 0 auto; 
 
    border-radius: 4px; 
 
    width: 100% !important; 
 
    height: auto !important; 
 
} 
 

 
#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: auto; 
 
    height: auto; 
 
    background: #ccc; 
 
    text-align: center; 
 
    line-height: 300px; 
 
} 
 

 
a.control_prev, a.control_next, a.control_prev_1, a.control_next_1 { 
 
    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_prev_1:hover, a.control_next:hover, a.control_next_1:hover { 
 
    opacity: 1; 
 
    -webkit-transition: all 0.2s ease; 
 
} 
 

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

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

 
.slider_option { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 10px auto; 
 
} 
 

 
.slider_option > label { 
 
    padding-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
<div id="slider"> 
 
    <a href="javascript:void(0);" class="control_next">>></a> 
 
    <a href="javascript:void(0);" class="control_prev"><</a> 
 
    <ul> 
 
     <li><img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" class="img-responsive" /></li> 
 
     <li><img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" class="img-responsive" /></li> 
 
     <li><img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" class="img-responsive" /></li> 
 
     <li><img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" class="img-responsive" /></li> 
 
    </ul> 
 
    </div> 
 

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

Answer 1

所有代碼地址元素id屬性，這是假設d對於頁面上的單個元素是唯一的。

由於您已經在使用jQuery，因此我建議您閱讀將函數結構化爲plugin的一部分，該頁面可應用於頁面上的多個元素。