开发者

Using JQuery to select NEXT radio button in a Slider

开发者 https://www.devze.com 2023-04-05 20:37 出处:网络
I build a single Image with radio button slider/jcarousel and what it should do is that, When the user click NEXT or PREVIOUS button, it will load up the next image and having that radiobutton selecte

I build a single Image with radio button slider/jcarousel and what it should do is that, When the user click NEXT or PREVIOUS button, it will load up the next image and having that radiobutton selected. I got this working on the Previous Button, but not the Next, somehow, it picks up the NEXT value instead.

HTML:

<li>
    <div class="image-position"><img src="images.png" width="200" height="289"/></div>
    <input type="radio" class="getradiotomove" name="radio1" />Radio 1
</li>
<li>
    <div class="image-position"><img src="images.png" width="200" height="289"/></div>
    <input type="radio" class="getradiotomove" name="radio2" />Radio 2
</li>
 <li>
    <div class="image-position"><img src="images.png" width="200" height="289"/></div>
    <input type="radio" class="getradiotomove" name="radio2" />Radio 3
</li>

<div id="buttons">
    <a href="#" id="prev">prev</a>
    <a href="#" id="next">next</a>
    <div class="clear"></div>
</div>

JavaScript:

jQuery('#prev').click(function() {
    jQuery(".getradiotomove").attr("checked", true);
    var left_indent = parseInt(jQuery('#slides ul').css('left')) + item_width;    
    jQuery('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){    
        jQuery('#slides li:first').before(jQuery('#slides li:last'));           
        jQuery('#slides ul').css({'left' : left_value});
    });        
    return false;

});


jQuery('#next').click(function() {
    //radio button value
    jQuery(".getradiotomove").attr("checked", true);
    var left_indent = parseInt(jQuery('#slides ul').css('left')) - item_width;
    jQuery('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function 开发者_运维知识库() {
        jQuery('#slides li:last').after(jQuery('#slides li:first'));                    
        jQuery('#slides ul').css({'left' : left_value});
    });
    return false;

});
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号