试图使图像轮播响应

时间:2014-06-02 18:18:24

标签: jquery image carousel

我是JS的初学者。我有一个图像旋转木马什么工作得很好。但是,当我试图让它响应时,它不再滚动,响应的东西也不起作用。

Heres JS代码:

$(document).ready(function() {

    var viewport = $( window ).width(); 

    if ( viewport > 1024 ) {
        $(".imagecarouselwrap").css("width","904");
        $(".carouselinner").css("width","834");
    }
    else if ( 769 <= viewport >= 1023 ) {
        $(".imagecarouselwrap").css("width","765");
        $(".carouselinner").css("width","695");
    }
    else if ( 481 <= viewport >= 768 ) {
        $(".imagecarouselwrap").css("width","348");
        $(".carouselinner").css("width","278");
    }
    else ( 320 <= viewport >= 480 ) {
        $(".imagecarouselwrap").css("width","209");
        $(".carouselinner").css("width","139");
    }

    $("#inner_ul li:first").before($("#inner_ul li:last"));

    $("#rightarrow img").click(function(){

        var elemlaius = $("#inner_ul li").outerWidth();
        var vasaktaane = parseInt($("#inner_ul").css("left")) - elemlaius;
        $("#inner_ul:not(:animated)").animate({"left" : vasaktaane},500,function(){    
            $("#inner_ul li:last").after($("#inner_ul li:first")); 
            $("#inner_ul").css({"left" : "-139px"});
        }); 
    });

    $("#leftarrow img").click(function(){

        var elemlaius = $("#inner_ul li").outerWidth();
        var vasaktaane = parseInt($("#inner_ul").css("left")) + elemlaius;
        $("#inner_ul:not(:animated)").animate({"left" : vasaktaane},500,function(){            
        $("#inner_ul li:first").before($("#inner_ul li:last")); 
        $("#inner_ul").css({"left" : "-139px"});
        });   
    });
});

请帮帮我。

我的补充部分:

var viewport = $( window ).width(); 

    if ( viewport > 1024 ) {
        $(".imagecarouselwrap").css("width","904");
        $(".carouselinner").css("width","834");
    }
    else if ( 769 <= viewport >= 1023 ) {
        $(".imagecarouselwrap").css("width","765");
        $(".carouselinner").css("width","695");
    }
    else if ( 481 <= viewport >= 768 ) {
        $(".imagecarouselwrap").css("width","348");
        $(".carouselinner").css("width","278");
    }
    else ( 320 <= viewport >= 480 ) {
        $(".imagecarouselwrap").css("width","209");
        $(".carouselinner").css("width","139");
    }

它将改变元素宽度设置,但如果我用较小的窗口观看它,它就不会完成他的工作。我使用http://quirktools.com/screenfly来观看较小的窗口

1 个答案:

答案 0 :(得分:0)

这部分应该是其他的,如果,不是

    else ( 320 <= viewport >= 480 ) {
        $(".imagecarouselwrap").css("width","209");
        $(".carouselinner").css("width","139");
    }


    else if ( 320 <= viewport >= 480 ) {
        $(".imagecarouselwrap").css("width","209");
        $(".carouselinner").css("width","139");
    }