追加prepend不工作与jquery

Question

正试图创建简单的滑块与jQuery。但是当我骑自行车的时候，我有点卡住了。

当我点击下一个，第一项应该被替换成最后一个和相反。 有任何建议，以解决这个周期

$(document).ready(function(){ 
 
\t var slideItem = $('.slider-item'); 
 
\t var slideContainer = $('.slide-container'); 
 
\t var sliderWrap = ((slideItem.width() * slideItem.length)+ 100); 
 

 
\t $(slideContainer).css('width', sliderWrap+'px'); 
 

 
function next() { 
 
\t $(slideContainer).animate({'margin-left':'-=515px'},300,function(){ 
 
\t \t $(slideItem).first().remove().appendTo(slideContainer); 
 
\t \t $(slideContainer).css('margin-left', ''); 
 
\t }); 
 
} 
 

 
function prev() { 
 
\t $(slideContainer).animate({'margin-left':'+=515px'},300,function(){ 
 
\t \t $(slideItem).last().remove().prependTo(slideContainer); 
 
\t \t $(slideContainer).css('margin-left', ''); 
 
\t }); 
 
} 
 

 
$('.next').on('click', function(){ 
 
\t next(); 
 
}); 
 

 
$('.prev').on('click', function(){ 
 
\t prev(); 
 
}); 
 

 
});

.thumbnail-gallery { 
 
\t margin-top: 160px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t height: 100%; 
 
\t background-color: green; 
 
} 
 

 
.slide-container { 
 
\t white-space: nowrap; 
 
\t background-color: red; 
 
} 
 

 
.slider-item { 
 
\t width: 500px; 
 
\t height: 100px; 
 
\t background-color: yellow; 
 
\t float: left; 
 
\t margin-right: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="thumbnail-gallery"> 
 
    <div class="slide-container"> 
 
    <div class="slider-item">1</div> 
 
    <div class="slider-item">2</div> 
 
    <div class="slider-item">3</div> 
 
    </div> 
 
</div> 
 

 
<button class="prev">prev</button> 
 
<button class="next">next</button>

Answer 1

.remove()通话是没有必要的。 .appendTo()和.prependTo()都从DOM中删除元素，并将元素附加或前置到选定的父元素。

可以在next函数和参数-1使用jQuery对象变量slideContainer作为第二个参数为jQuery()上下文设置为父元素，直接后代选择>，jQuery的:eq()与参数0在prev函数从slideContainer内选择期望的元件父元素。

$(document).ready(function() { 
 
    var slideItem = $('.slider-item'); 
 
    var slideContainer = $('.slide-container'); 
 
    var sliderWrap = ((slideItem.width() * slideItem.length) + 100); 
 

 
    $(slideContainer).css('width', sliderWrap + 'px'); 
 

 
    function next() { 
 
    slideContainer.animate({ 
 
     'margin-left': '-=515px' 
 
    }, 300, function() { 
 
     $("> :eq(0)", slideContainer).appendTo(slideContainer); 
 
     slideContainer.css('margin-left', ''); 
 
    }); 
 
    } 
 

 
    function prev() { 
 
    $(slideContainer).animate({ 
 
     'margin-left': '+=515px' 
 
    }, 300, function() { 
 
     $("> :eq(-1)", slideContainer) 
 
     .prependTo(slideContainer); 
 
     slideContainer.css('margin-left', ''); 
 
    }); 
 
    } 
 

 
    $('.next').on('click', function() { 
 
    next(); 
 
    }); 
 

 
    $('.prev').on('click', function() { 
 
    prev(); 
 
    }); 
 

 
});

.thumbnail-gallery { 
 
    margin-top: 160px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 

 
.slide-container { 
 
    white-space: nowrap; 
 
    background-color: red; 
 
} 
 

 
.slider-item { 
 
    width: 500px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    float: left; 
 
    margin-right: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="thumbnail-gallery"> 
 
    <div class="slide-container"> 
 
    <div class="slider-item">1</div> 
 
    <div class="slider-item">2</div> 
 
    <div class="slider-item">3</div> 
 
    </div> 
 
</div> 
 

 
<button class="prev">prev</button> 
 
<button class="next">next</button>

或者，也可以在.data()通过存储传递给用作与所述元件相关联的阵列参数使用单一的功能两者next，prev功能和click事件处理程序，例如.next.prev和元素

$(document).ready(function() { 
 
    var slideItem = $('.slider-item'); 
 
    var slideContainer = $('.slide-container'); 
 
    var sliderWrap = ((slideItem.width() * slideItem.length) + 100); 
 
    
 
    $(".next").data("args", ["-", "append", 0]); 
 
    $(".prev").data("args", ["+", "prepend", -1]); 
 

 
    $(slideContainer).css('width', sliderWrap + 'px'); 
 

 
    function nextPrev(sign, dir, index) { 
 
    slideContainer.animate({ 
 
     'margin-left': sign + '=515px' 
 
    }, 300, function() { 
 
     $("> :eq("+index+")", slideContainer)[dir + "To"](slideContainer); 
 
     slideContainer.css('margin-left', ''); 
 
    }); 
 
    } 
 

 
    $(".next, .prev").on("click", function() { 
 
    nextPrev.apply(this, $(this).data("args")); 
 
    }); 
 

 
});

.thumbnail-gallery { 
 
    margin-top: 160px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 

 
.slide-container { 
 
    white-space: nowrap; 
 
    background-color: red; 
 
} 
 

 
.slider-item { 
 
    width: 500px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    float: left; 
 
    margin-right: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="thumbnail-gallery"> 
 
    <div class="slide-container"> 
 
    <div class="slider-item">1</div> 
 
    <div class="slider-item">2</div> 
 
    <div class="slider-item">3</div> 
 
    </div> 
 
</div> 
 

 
<button class="prev">prev</button> 
 
<button class="next">next</button>

Answer 2

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

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

 
});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); \t 
 

 
html { 
 
    border-top: 5px solid #fff; 
 
    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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider"> 
 
    <a href="#" class="control_next">>></a> 
 
    <a href="#" class="control_prev"><</a> 
 
    <ul> 
 
    <li>SLIDE 1</li> 
 
    <li style="background: #aaa;">SLIDE 2</li> 
 
    <li>SLIDE 3</li> 
 
    <li style="background: #aaa;">SLIDE 4</li> 
 
    </ul> 
 
</div> 
 

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