Javascript 如何使旋转木马实现更好？

您可以查看

因此，它所做的是自动检测窗口大小，并调整动态显示的图像大小——其思想是，在所有屏幕分辨率中，比例都是相同的

以下是我发现的一些问题，我希望能找到解决方案，使其更加优雅和“流畅”：

• 它在更大的分辨率（比如1280+）下看起来不错，功能也很好，但一旦你尝试以1024或更低的分辨率加载它，它的外观和功能就会开始变得怪异
• 滚动时，它的滚动不太平滑
• 某些对齐内容已关闭（即，当切换到“3向上”或“4向上”视图时，最右侧图像上的白色边框将以1680分辨率消失）
• 当你转到4-up并滚动到最右边时，它会奇怪地结束，没有显示任何图像
• 有重复的JS，我知道这不是干巴巴的，我希望用一种更优雅的方式来实现当前版本对多个“视图”的功能
• 一旦它开始加载，加载大约需要3秒钟，在这段时间内，你可以看到更小的版本，然后你可以看到调整大小的图像何时被放到页面上。这对我来说似乎有点“不整洁”，所以我希望它更干净
• 再加上我如何“收紧”它，使其功能更好的提示

您可以在该反馈页面上查看源代码，但其中存在无关代码，因此以下是相关部分：

HTML:

以下是JS：

$(window).load(function() {
// --------------------------- Begin Comparison Code --------------------------------------------------------       
        var win_width = $(window).width();
        var num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2.

        $("#viewbar img").click(function(e) {                       
            num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.          
            $('#viewname').text(num_of_images + '-up');         
            //--- All of this function is a duplicate of the 'default' case which is below. This is not very DRY-like, but it works for now.

            var oImg_height = $('#slider-code .viewport .overview img:eq(1)').height(); //size of original image height
            var oImg_width =  $('#slider-code .viewport .overview img:eq(1)').width(); //size of original image width
            var oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image
            var tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2
            var tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio.
            var sliderCode_w = $('#slider-code').width();
            var sliderCode_h = $('#slider-code').height();
            var ul_width = $('#slider-code .viewport ul').width();

            $('#slider-code .viewport .overview img:lt(26)').css({'width' : tImg_width, 'height' : tImg_height});   //resizes the images

            var rImg_width = $('#slider-code .viewport .overview img:eq(1)').width(); // size of resized image width 
            var rImg_height = $('#slider-code .viewport .overview img:eq(1)').height(); // size of resized image width

            $('#slider-code .next').css({'top' : rImg_height / 2}); //This needs to be resolved for various size windows
            $('#slider-code .prev').css({'top' : rImg_height / 2});     
            $('#slider-code').css({'width': '100%', 'height': rImg_height + 10}); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height
            $('#slider-code .viewport').css({'width': win_width * 0.94, 'height': rImg_height + 10});
            $('#slider-code .overview li').css({'width': rImg_width + 5});
            var view_new_w = $('#slider-code .viewport').width();
            var view_new_h = $('#slider-code .viewport').height();
            var li_w = $('#slider-code .overview li').width();
            var rUl_width = $('#slider-code .viewport ul').width();

            $('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 });        

            e.preventDefault();
        }); 

        //This is the default case that executes before a click is done. Because the code has been repeated above, it isn't very DRY-like.

        var oImg_height = $('#slider-code .viewport .overview img:eq(1)').height(); //size of original image height
        var oImg_width =  $('#slider-code .viewport .overview img:eq(1)').width(); //size of original image width
        var oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image
        var tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2
        var tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio.
        var sliderCode_w = $('#slider-code').width();
        var sliderCode_h = $('#slider-code').height();
        var ul_width = $('#slider-code .viewport ul').width();

    //  console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height);

        $('#slider-code .viewport .overview img:lt(26)').css({'width' : tImg_width, 'height' : tImg_height});   //resizes the images

        var rImg_width = $('#slider-code .viewport .overview img:eq(1)').width(); // size of resized image width 
        var rImg_height = $('#slider-code .viewport .overview img:eq(1)').height(); // size of resized image width

        $('#slider-code .next').css({'top' : rImg_height / 2}); //This needs to be resolved for various size windows
        $('#slider-code .prev').css({'top' : rImg_height / 2});     
        $('#slider-code').css({'width': '100%', 'height': rImg_height + 10}); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height
        $('#slider-code .viewport').css({'width': win_width * 0.94, 'height': rImg_height + 10});
        $('#slider-code .overview li').css({'width': rImg_width + 5});
        var view_new_w = $('#slider-code .viewport').width();
        var view_new_h = $('#slider-code .viewport').height();
        var li_w = $('#slider-code .overview li').width();
        var rUl_width = $('#slider-code .viewport ul').width();


//      console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width);

        $('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 });            

// --------------- End Comparison Code --------------------------------------------------------------------------

})

顺便说一句，我把JS放在window.load函数中，因为当我把它放在document ready中时，它不能正常工作，因为代码必须在调整图像大小之前检测窗口大小——如果窗口没有加载，它只会暂停，不会加载带有正确图像的旋转木马

我知道这项任务看起来很艰巨，但我真的希望社区能帮我渡过难关

谢谢

编辑：没有人敢刺一刀

---

编辑2：我已经做了JonP建议的更改，但我现在有一些新问题，我正在努力解决。有人对我如何让它恢复正常有什么建议吗？重新加载上面的链接以查看新版本。

完全未经测试，而且是暗中操作，因为我对tiny carosel不太熟悉

通过缓存一些重复的选择器，这可能有助于使您稍微干涸，并提供一点性能改进

不过，这对你的四喜问题没有帮助

    //Go Global with our varibles
    var oImg, sliderCode, sliderViewPort,sliderOverViewImg , win_width;
    var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width;
    var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width;

    function setUp(numImages) {
        oImg_height = oImg.height(); //size of original image height 
        oImg_width = oImg.width(); //size of original image width 
        oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image 
        tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2 
        tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio. 
        sliderCode_w = sliderCode.width();
        sliderCode_h = sliderCode.height();
        var ul_width = $('#slider-code .viewport ul').width();

        //  console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height); 

        $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height });   //resizes the images

        rImg_width = sliderOverViewImg.width(); // size of resized image width  
        rImg_height = sliderOverViewImg.height(); // size of resized image width 

        $('#slider-code .next').css({ 'top': rImg_height / 2 }); //This needs to be resolved for various size windows 
        $('#slider-code .prev').css({ 'top': rImg_height / 2 });
        sliderCode.css({ 'width': '100%', 'height': rImg_height + 10 }); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height 
        sliderViewport.css({ 'width': win_width * 0.94, 'height': rImg_height + 10 });
        $('#slider-code .overview li').css({ 'width': rImg_width + 5 });
        view_new_w = sliderViewPort.width();
        view_new_h = sliderViewPort.height();
        li_w = $('#slider-code .overview li').width();
        rUl_width = $('#slider-code .viewport ul').width();

        //      console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width); 

        sliderCode.tinycarousel({ controls: true, animation: true, display: 1 });

    }

    $(window).load(function() {
        //Cache Some Common Elements
        oImg = $('#slider-code .viewport .overview img:eq(1)');
        sliderCode = $('#slider-code');
        sliderViewPort = $('#slider-code .viewport');
        sliderOverViewImg = $('#slider-code .viewport .overview img:eq(1)')

        // --------------------------- Begin Comparison Code --------------------------------------------------------        
        win_width = $(window).width();
        num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2. 

        $("#viewbar img").click(function(e) {
            num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.           
            $('#viewname').text(num_of_images + '-up');

            setUp(num_of_images);

            e.preventDefault();
        });

        //Default set up
        setUp(num_of_images);


        // --------------- End Comparison Code -------------------------------------------------------------------------- 

    }) 

---

祝您好运。

对于初学者，您需要添加一个事件处理程序来调整窗口大小。第一次加载时，它看起来很神奇，但以后不敢更改浏览器大小。@Brad我知道……一旦调整窗口大小，您必须刷新页面。这是我以后可以谈的。不过我想修正一下我在帖子中列出的基本问题。老兄……我希望我能不止一次地投票。谢谢你至少抽出时间。我甚至还没有测试过，但是谢谢你的参与。我真的很感激。嘿，Jon P，当我实现这一点时…我只看到一个图像，它被切断了…这是什么原因造成的？请参阅：JonP，这也是一个有趣的事实……如果您单击实现，并多次按下“2-up”图标，您将看到视口变长（即高度增加，显示更多图像）。是什么原因造成的？好吧，我知道了。变量

sliderCode

声明错误。它应该是

sliderCode=$（'sliderCode.viewport.overview img:lt（26）'）.css（{'width'：timgu width，'height'：timgu height}）//调整图像的大小

，与现在不同。所以我刚刚在window.load（函数）中注释了一行，并在上面全局声明slidecode，似乎已经解决了这些问题。有一个bug，不是我如何分配变量，而是我（错过）如何使用它。现在再试一次。仍然未经测试。我以后可能有机会好好看看这个

$(window).load(function() {
// --------------------------- Begin Comparison Code --------------------------------------------------------       
        var win_width = $(window).width();
        var num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2.

        $("#viewbar img").click(function(e) {                       
            num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.          
            $('#viewname').text(num_of_images + '-up');         
            //--- All of this function is a duplicate of the 'default' case which is below. This is not very DRY-like, but it works for now.

            var oImg_height = $('#slider-code .viewport .overview img:eq(1)').height(); //size of original image height
            var oImg_width =  $('#slider-code .viewport .overview img:eq(1)').width(); //size of original image width
            var oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image
            var tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2
            var tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio.
            var sliderCode_w = $('#slider-code').width();
            var sliderCode_h = $('#slider-code').height();
            var ul_width = $('#slider-code .viewport ul').width();

            $('#slider-code .viewport .overview img:lt(26)').css({'width' : tImg_width, 'height' : tImg_height});   //resizes the images

            var rImg_width = $('#slider-code .viewport .overview img:eq(1)').width(); // size of resized image width 
            var rImg_height = $('#slider-code .viewport .overview img:eq(1)').height(); // size of resized image width

            $('#slider-code .next').css({'top' : rImg_height / 2}); //This needs to be resolved for various size windows
            $('#slider-code .prev').css({'top' : rImg_height / 2});     
            $('#slider-code').css({'width': '100%', 'height': rImg_height + 10}); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height
            $('#slider-code .viewport').css({'width': win_width * 0.94, 'height': rImg_height + 10});
            $('#slider-code .overview li').css({'width': rImg_width + 5});
            var view_new_w = $('#slider-code .viewport').width();
            var view_new_h = $('#slider-code .viewport').height();
            var li_w = $('#slider-code .overview li').width();
            var rUl_width = $('#slider-code .viewport ul').width();

            $('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 });        

            e.preventDefault();
        }); 

        //This is the default case that executes before a click is done. Because the code has been repeated above, it isn't very DRY-like.

        var oImg_height = $('#slider-code .viewport .overview img:eq(1)').height(); //size of original image height
        var oImg_width =  $('#slider-code .viewport .overview img:eq(1)').width(); //size of original image width
        var oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image
        var tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2
        var tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio.
        var sliderCode_w = $('#slider-code').width();
        var sliderCode_h = $('#slider-code').height();
        var ul_width = $('#slider-code .viewport ul').width();

    //  console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height);

        $('#slider-code .viewport .overview img:lt(26)').css({'width' : tImg_width, 'height' : tImg_height});   //resizes the images

        var rImg_width = $('#slider-code .viewport .overview img:eq(1)').width(); // size of resized image width 
        var rImg_height = $('#slider-code .viewport .overview img:eq(1)').height(); // size of resized image width

        $('#slider-code .next').css({'top' : rImg_height / 2}); //This needs to be resolved for various size windows
        $('#slider-code .prev').css({'top' : rImg_height / 2});     
        $('#slider-code').css({'width': '100%', 'height': rImg_height + 10}); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height
        $('#slider-code .viewport').css({'width': win_width * 0.94, 'height': rImg_height + 10});
        $('#slider-code .overview li').css({'width': rImg_width + 5});
        var view_new_w = $('#slider-code .viewport').width();
        var view_new_h = $('#slider-code .viewport').height();
        var li_w = $('#slider-code .overview li').width();
        var rUl_width = $('#slider-code .viewport ul').width();


//      console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width);

        $('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 });            

// --------------- End Comparison Code --------------------------------------------------------------------------

})

    //Go Global with our varibles
    var oImg, sliderCode, sliderViewPort,sliderOverViewImg , win_width;
    var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width;
    var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width;

    function setUp(numImages) {
        oImg_height = oImg.height(); //size of original image height 
        oImg_width = oImg.width(); //size of original image width 
        oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image 
        tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2 
        tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio. 
        sliderCode_w = sliderCode.width();
        sliderCode_h = sliderCode.height();
        var ul_width = $('#slider-code .viewport ul').width();

        //  console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height); 

        $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height });   //resizes the images

        rImg_width = sliderOverViewImg.width(); // size of resized image width  
        rImg_height = sliderOverViewImg.height(); // size of resized image width 

        $('#slider-code .next').css({ 'top': rImg_height / 2 }); //This needs to be resolved for various size windows 
        $('#slider-code .prev').css({ 'top': rImg_height / 2 });
        sliderCode.css({ 'width': '100%', 'height': rImg_height + 10 }); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height 
        sliderViewport.css({ 'width': win_width * 0.94, 'height': rImg_height + 10 });
        $('#slider-code .overview li').css({ 'width': rImg_width + 5 });
        view_new_w = sliderViewPort.width();
        view_new_h = sliderViewPort.height();
        li_w = $('#slider-code .overview li').width();
        rUl_width = $('#slider-code .viewport ul').width();

        //      console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width); 

        sliderCode.tinycarousel({ controls: true, animation: true, display: 1 });

    }

    $(window).load(function() {
        //Cache Some Common Elements
        oImg = $('#slider-code .viewport .overview img:eq(1)');
        sliderCode = $('#slider-code');
        sliderViewPort = $('#slider-code .viewport');
        sliderOverViewImg = $('#slider-code .viewport .overview img:eq(1)')

        // --------------------------- Begin Comparison Code --------------------------------------------------------        
        win_width = $(window).width();
        num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2. 

        $("#viewbar img").click(function(e) {
            num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.           
            $('#viewname').text(num_of_images + '-up');

            setUp(num_of_images);

            e.preventDefault();
        });

        //Default set up
        setUp(num_of_images);


        // --------------- End Comparison Code -------------------------------------------------------------------------- 

    })