Question

我在滑块中显示图像有轻微问题，我正在使用<li>和foreach（来自特色图片的缩略图）。图像以我想要的方式正确显示，但由于其中一个或另一个原因，它们是重复的。

这是截图： enter image description here

这是我一直在使用的代码：

<?php 
    global $post;
    $args = array(
    'numberposts' => -1,
    'post_type'    => 'client'
    );
    $home_clients = get_posts($args);
    if($home_clients): 
?>
<div class="client">
    <h5>clients</h5>
    <div class="show-client">
        <ul class="bxslider">
            <?php foreach($home_clients as $post): setup_postdata($post); 
            $client_link = get_post_meta($post->ID, 'client_link', true);
            ?>
            <li><a target = "_blank" href="<?php echo $client_link; ?>"><?php echo get_the_post_thumbnail($post->ID, 'client-thumb'); ?></a></li>
            <?php endforeach; wp_reset_postdata(); ?>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<?php endif; ?>

这是HTML输出：

<h5>clients</h5>
    <div class="show-client">
        <ul class="bxslider">
            <li><a target = "_blank" href="#test1"><img width="50" height="50" src="http://localhost/wp-content/uploads/2014/05/redcrossx1-50x50.png" class="attachment-client-thumb wp-post-image" alt="test" /></a></li>
            <li><a target = "_blank" href="#test2"><img width="50" height="50" src="http://localhost/wp-content/uploads/2014/08/Screen-Shot-2014-08-20-at-3.14.28-PM-50x50.png" class="attachment-client-thumb wp-post-image" alt="Screen Shot 2014-08-20 at 3.14.28 PM" /></a></li>
            <li><a target = "_blank" href="#test3"><img width="50" height="33" src="http://localhost/wp-content/uploads/2014/08/DSC_9456.jpg" class="attachment-client-thumb wp-post-image" alt="DSC_9456" /></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
            <li><a target = "_blank" href="#"></a></li>
        </ul>
    </div>

我看得越多，我就越困惑。我想这实际上是CSS的东西，但不确定为什么加载图像需要太多了......

这是我的css代码：

.bot-footer .sss-client h5 {
    color: #6c6c6c;
    font-size: 43px;
    text-transform: uppercase;
    margin: 0;
    float: left;
    margin-right: 50px;
}
.bot-footer .sss-client .show-client {
    float: left;
    max-width: 877px;
    margin: 14px 0;
    height: 22px;
}
.show-client ul {
    font-size: 0;
}
.show-client ul li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: auto !important;
    overflow: hidden;
}
.show-client ul li a {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
    display: block;
}
.show-client ul li a:hover {
    color: #0f6cb6;
}
.show-client .bx-wrapper {
    max-width: 877px !important;
}
.show-client .bx-wrapper .bx-viewport {
    background: none;
    box-shadow: none;
    border: none;
    max-width: 740px;
    margin: 0 auto;
}
.show-client .bx-wrapper .bx-prev {
    background: url(images/icon-arrow-footer-l.png) no-repeat center;
    left: -30px;
}
.show-client .bx-wrapper .bx-next {
    background: url(images/icon-arrow-footer-r.png) no-repeat center;
    right: -10px;
}
.show-client .bx-wrapper .bx-controls-direction a {
    width: 22px;
    height: 22px;
    margin-top: -10px;
}
.show-client .bx-wrapper .bx-prev:hover {
    background-position: center center;
}
.show-client .bx-wrapper .bx-next:hover {
    background-position: center center;
}

Answer 1

您最好的选择是使用Firebug（或其他DOM查看工具）检查DOM以查看第二张图像是如何显示的。一旦你看到实际的DOM html（而不是页面源），你就可以了。

如果你实际上有2个DOM元素，那么你可能会遇到与你真正想要完成的事情相冲突的JavaScript。

wordpress上复制的foreach图像

1 个答案: