0

i have a list of images that i want to cycle through using next / previous buttons. but i'm having real trouble doing it. so far I've managed to just keep reverting to the first image no matter what image i'm on when i click next link.

the html for the list is .. 

<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>

the jquery i've been fiddling around with is

this slides the images if they are clicked on - this bit seems to work okay. 

$(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);



});

the next button 

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');

});

thanks in advance :D

4

2 に答える 2

0

var currentElement は li を選択していますが、どの li が指定されていません。アクティブなliに対して「選択された」クラスを追加するようなことをしてください。次に、 current elem = $('.selected') を実行できます

于 2012-08-13T21:52:06.157 に答える
0

ここでの問題は、currentElement がすべての li のコレクションを含む jQuery オブジェクトであることです。現在選択されているのは特定の李ではありません。

この場合、現在の li 要素にクラスまたは何かを追加して、より適切に処理できるようにすることができます。

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