Question

我有一个图像列表，我想使用下一个/上一个按钮循环。但我真的遇到了麻烦。到目前为止，无论我点击下一个链接时我是什么图像，我都设法恢复到第一张图像。

列表的html是..

<div class="wrapper">

<div class="slider-container">
    <ul class="wineslider">
        <li>
            <img src="assets/img/shop/redwine/bottle.png" alt="1">
            <div class="info">
                <p>I am wine information 1 </p>
            </div>
        </li>
        <li>
            <img src="assets/img/shop/redwine/bottle.png" alt="2">
            <div class="info">
                <p>I am wine information 2</p>
            </div>
        </li>
        <li>
            <img src="assets/img/shop/redwine/bottle.png" alt="3">
            <div class="info">
                <p>I am wine information 3</p>
            </div> 
        </li>
.....

<a href="#" class="previous">Previous</a>
    <a href="#" class="next">Next</a>

</div>

</div>

我一直在摆弄的jquery是

如果点击它们会滑动图像 - 这一点看起来没问题。

$(document).ready(function() {
$('.wineslider li').bind({
    click: function() {
      $('.wineslider li').stop().animate({'width':'60px'},600);
      $(this).stop().animate({'width':'420px'},600); // Width of slideout box
      $('.info').css('display','block');
    },
});

// Find number of slides
var count   = $('li').length;
//alert(count);

// Set current slide number
var curr    = 1;
ert(curr);



});

下一个按钮

var active = 0; // starts at zero
var list = $('ul.wineslider');
$("a.next").click(function(event){


event.preventDefault();         // cancel click through
var currentElement = $('.wineslider li');
var i = $(currentElement).index();

currentElement = currentElement.next();
scrollTo(currentElement);  
$('.wineslider li').stop().animate({'width':'60px'},600);
$(currentElement).stop().animate({'width':'420px'},600); // Width of slideout box
$('.info').css('display','block');

});

提前感谢：D

Answer 1

var currentElement正在选择li但未指定li。做一些事情，比如为活跃的li添加一个“已选择”的类。然后你可以做当前的elem = $（'。selected'）

Answer 2

这里的问题是currentElement是一个包含所有li的集合的jQuery对象。它不是当前选择的特定li。

在这种情况下，您可能希望在当前的li元素中添加一个类或其他内容，以便您可以更好地处理它。

currentElement = $('.wineslider li.current');
nextElement = currentElement.next();

使用jQuery移动到无序列表中的下一个元素

2 个答案: