javascript - 如何使这个轮播实现更好？

Question

所以它的作用是自动检测窗口大小并调整要动态显示的图像的大小——这个想法是在所有屏幕分辨率下，比例都是相同的。

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

它看起来不错并且在更大的分辨率（比如 1280+）下运行良好，但是一旦你尝试在 1024 或更低的分辨率下加载它，它就会开始看起来和运行起来很奇怪。
滚动时，它不会滚动太流畅。
一些对齐的东西是关闭的（即当您切换到“3-up”或“4-up”视图时，最右边图像上的白色边框在 1680 分辨率下消失）。
当您转到 4-up 并滚动到最右侧时，它以奇怪的方式结束，没有显示图像。
有重复的 JS，我知道这不是 DRY，并且会喜欢一种更优雅的方式来实现当前版本对多个“视图”所做的事情。
最初加载后，加载大约需要 3 秒，在此期间您实际上可以看到较小的版本，然后您会看到调整大小的图像何时放在页面上。这对我来说似乎有点“不整洁”，所以我希望它更干净。
加上任何关于我如何“收紧”它并让它更好地发挥作用的提示。

您可以在该反馈页面上查看源代码，但那里有多余的代码，所以这里是相关部分：

HTML：

<div id="compare_view" align="center">

    <div id="viewbar" class="compv-navbar">
        <a href=""><img src="images/2-up-icon-grey.png" alt="2-up-view" data-id="2"></a> | 
        <a href=""><img src="images/3-up-icon-grey.png" alt="3-up-view" data-id="3"></a> | 
        <a href=""><img src="images/4-up-icon-grey.png" alt="4-up-view" data-id="4"></a> | 
        <span id="viewname" class="view_name">2-up</span>
    </div>  

<div id="slider-code" align="center">
    <a class="buttons prev" href="#"></a>
    <div class="viewport">
        <ul class="overview">           
            <li><img src="images/red-stripe.jpg" /></li>
            <li><img src="images/red-stripe-bw.jpg" /></li>
            <li><img src="images/red-stripe-red.jpg" /></li>            
            <li><img src="images/red-stripe-dark.jpg" /></li>
            <li><img src="images/red-stripe.jpg" /></li>
            <li><img src="images/red-stripe-red.jpg" /></li>
            <li><img src="images/red-stripe-dark.jpg" /></li>           
        </ul>
    </div>
    <a class="buttons next" href="#"></a>
    </div>

    <div id="notice">
        Flip through the images using the <strong> buttons </strong> and your mouse.
    </div>

</div>

这是相关的CSS：

#slider-code { 
    height: 125px; 
    overflow:hidden;
    margin: 0 0 0 0;
}

#slider-code .viewport { 
/*  margin-left: auto;    -- With this enabled, the arrows don't work.
    margin-right: auto;  */
    float: left; 
    width: 240px; 
    height: 125px; 
    overflow: hidden; 
    position: relative;

}

#slider-code .viewport .overview img {
    border: 4px solid #f6f6f7;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px; 
}

#slider-code .buttons { 
    display: block; 
    margin: 0 0 0 0; /* 10px 10px 0 0;  */
    float: left;
    vertical-align: middle;
}

#slider-code .prev {
    width: 32px;
    height: 32px;
    background: transparent url('../images/left-arrow.png') no-repeat 0 0;
    vertical-align: middle;
    margin: 0 0 0 0; /* top, right, bottom, left */ 
    position: relative;
/*  top: 190.5px;   */
}

#slider-code .next { 
    width: 32px;
    height: 32px;
    background: transparent url('../images/right-arrow.png') no-repeat 0 0;
    margin: 0 0 0 0px;  /* 30px 0 0 10px; */
    vertical-align: middle;
    position: relative;
}

#slider-code .disable { 
     /* for IE */
    filter:alpha(opacity=40);
    /* for everything else */  
    opacity:0.4;
}

#slider-code .overview { 
    list-style: none; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    left: 0; 
    top: 0; 
}

#slider-code .overview li { 
    float: left; 
    margin: 0 20px 0 0; 
    padding: 1px; 
    height: 121px; 
    border: 1px solid #dcdcdc;
    width: 236px;
}

.view_name {
    font-family: "Helvetica", serif;
    color: #f9f4c0;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    word-spacing: 0px;
    letter-spacing: 0px;
    background: #1a1a1a;    
    padding: 1px 3px 1px 3px; /* top, right, bottom, left */        
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

#compare_view .compv-navbar img {
    margin: 3px 3px -4px 3px;   
}

#compare_view .compv-navbar img a.hover {   
    margin: 3px 3px -4px 3px;   
}

这是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 函数中，因为当我将它放入准备好的文档时它无法正常工作，因为代码必须在调整图像大小之前检测窗口大小 - 如果窗口没有加载它只会停止而不是用正确的图像加载轮播。

我知道这项任务似乎很艰巨，但我真的希望社区能为我完成任务。

谢谢。

编辑：没有人勇敢地刺伤？

编辑 2：我已经做出了 JonP 建议的更改，但是现在我正在尝试解决一些新问题。有人对我如何使其恢复正常有任何建议吗？重新加载上面的链接以查看新版本。

score 2 · Accepted Answer

完全未经测试并且在黑暗中刺伤，因为我对小旋转木马不太熟悉。

这可能会帮助您摆脱困境，并通过缓存一些重复的选择器来提供小的性能改进。

不过，这对您的 4-up 问题无济于事

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

    })

祝你好运。

javascript - 如何使这个轮播实现更好？

1 回答 1

Related

Reference