试图使图像旋转木马响应

Question

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

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"});
        });   
    });
});

请帮帮我。

My add part:

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来观察较小的窗口

Answer 1

这部分应该是else if，而不是else

    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");
    }