0

我有一个图像列表，我想使用下一个/上一个按钮循环浏览。但我真的很难做到这一点。到目前为止，无论我在单击下一个链接时使用的是什么图像，我都设法继续恢复到第一张图像。

列表的 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');

});

先谢谢了

4

2 回答 2

0

var currentElement 正在选择一个 li，但未指定哪个 li。做一些事情，比如为活动的 li 添加一个“选择”的类。然后你可以做 current elem = $('.selected')

于 2012-08-13T21:52:06.157 回答
0

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

在这种情况下，您可能希望向当前的 li 元素添加一个类或其他东西，这样您就可以像这样更好地处理它。

currentElement = $('.wineslider li.current');
nextElement = currentElement.next();
于 2012-08-13T21:53:29.383 回答