javascript - 水平 div 图像滚动动态宽度

Question

我的水平图像滚动有问题。 一些解决方案存在很多威胁，但没有适合我的解决方案:(

这是我的图片库的链接: http://lichtspielfotografie.com/portrait/

我使用的CSS:

.photos {
         width:10000px;
         height:100%;   
         position:absolute;
         left:0;
         margin-left:0; 
         margin-top: 0; 
}
#scroll{ 
        position:absolute;  
        width:100%;   
        height:100%;  
        overflow-x:scroll; 
        overflow-y:hidden; 
        margin-left:0; 
        left:0;
        margin-top: -8,25%; }

还有 html/php:

         <div id="scroll">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
            <script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
            <script type="text/javascript">
                    $(document).ready(function() {
                    $('html, body, *').mousewheel(function(e, delta) {
                    this.scrollLeft -= (delta * 20);
                    e.preventDefault();
                    });
                });
            </script>

            <div class="photos">
                <?php global $post; 
                $src = '';
                $breite='0px';
                $args = array( 
                'post_type' => 'attachment', 
                'numberposts' => -1, 
                'post_mime_type' => 'image', 
                'post_status' => null, 
                'post_parent' => $post->ID );
                $attachments = get_posts($args); ?>

                <?php
                if ($attachments) {
                    foreach ( $attachments as $attachment ) {
                        $src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
                        if ($src) {
                            echo '<img src='.$src[0];'';
                            } 
                        echo ' height="100%"/img> &nbsp;';                          
                    }}
                ?>    
           </div> 
        </div>
    </main><!-- #main -->
</div><!-- #primary -->

我希望你能帮我得到动态照片的宽度。我对这个问题感到非常沮丧。

Answer 1

首先要多练习 css 样式和 html。删除照片之间的   并在它们之间留出空白。你可以这样做:

.photos img {
    margin: 0 2px;
}

例如在您的 CSS 中。然后要计算图像的总宽度，您将需要 javascript。

您需要遍历图像并获取每个图像的宽度。如果我们假设您接受了我的建议并且您已将   替换为 css 样式(边距)，我们将使用 .outerWidth .这将获得带有填充和边框宽度的图像宽度。如果我们像这样设置 true:.outerWidth(true) 它也会得到边距。这就是我们所需要的。为了遍历图像，我们将使用 .each() .

开始吧:

var totalWidth = 0;

$('.photos > img').each(function() {
    totalWidth += $(this).outerWidth(true);
});

现在我们只需要为图像容器设置新的宽度:

$('.photos').css('width', totalWidth + 'px');

如果您还有其他问题，请随时提出。祝你好运:)

编辑:

您必须在加载 html 时执行此操作。您的代码中已有该功能。它是 $(document).ready(function() {});。在这里你放置了所有你想要在 html 加载后执行的 javascript 代码。

所以在这种情况下你会做:

$(document).ready(function() {

    // ... other js code here ...

    var totalWidth = 0;

    $('.photos > img').each(function() {
        totalWidth += $(this).outerWidth(true);
    });

    // ... other js code here ...

});

您也可以将您的代码放入另一个 js 文件中，然后将其加载到您的 head 中，如 jQuery 等 js 库。