我正在使用Master Slider 提供幻灯片。

在一个循环中，我放置了一些CSS来创建类.ms-thumb-frame-selected 动态使用帖子的拇指作为背景。但现在我的问题是所有元素.ms-thumb-frame 类获取相同的图像。但当我在浏览器中的“Inspect element”中进行检查时，我可以看到其他图像是正确的。

这是我的代码：

$loop = new WP_Query( \'posts_per_page=6&cat=\');
while($loop->have_posts()) : $loop->the_post();
$bg= 0;
$slider_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'\');

?>
<?php
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
if($bg == 0){ ?>

    <style>
        #masterslider .ms-thumb-frame-selected
        {
            background:linear-gradient( rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url("<?php echo $url;?>") no-repeat ;
            background-size:cover;
            opacity: .8;
            background-position: 100 0;
            transition: background .5s;
        }
    </style>

这是回路

<!-- new slide -->
<div class="ms-slide">
    <!-- slide background -->
    <img src="<?php bloginfo(\'template_directory\');?>/js/masterslider/blank.gif" data-src="<?php echo $slider_image[0];?> " alt="<?php the_title();?>" />
    <!-- slide text layer -->
    <div class="ms-layer ms-caption"  data-offset-x      = "10"
 data-offset-y      = "15"
 data-origin        = "tr"
 data-type          = "text"
 data-effect        = "bottom(90)"
 data-duration      = "900"
 data-ease          = "easeOutQuart">
        <h1><a href="<?php the_permalink();?>"><?php the_title();?> </a></h1>
    </div>
    <!-- slide text title it shows in thumbnail list. -->

    <div class="ms-thumb">
        <div class="ms-thumb-text">
            <h3><?php //the_title();?>
                <?php  if ( get_the_title() ) {
                    $t = get_the_title();
                    $t =  mb_substr($t, 0, 102, \'UTF-8\');

                    }else{
                        the_ID();
                    }
                    echo $t;
                ?>
            </h3>



        </div>
    </div>
</div>
    <?php }?>
<!-- end of slide -->

这是javascript

t.slideAction = function (t) {
        var r = n(t.$element.find(".ms-thumb"))
            , u = this
            , i = n("<div><\\/div>").addClass("ms-thumb-frame").append(r).append(n(\'<div class="ms-thumb-ol"><\\/div>\')).bind("click", function () {
                u.changeSlide(i)
            });
        if (i[0].index = this.index_count++, this.$thumbscont.append(i), n.browser.msie) r.on("dragstart", function (n) {
            n.preventDefault()
        });

看了我的幻灯片后，我发现所有背景图像都是相同的，但如果通过“Inspect element”检查浏览器中的代码，就会得到其他图像。这怎么可能？

<div id="masterslider">
    <div class=".ms-thumb-frame-selected">
        <!-- ... -->
    </div>
</div>

<div id="masterslider">
    <div class="ms-thumb-frame-selected post-<?php echo $post->ID; ?>">
        <!-- ... -->
    </div>
</div>

#masterslider .ms-thumb-frame-selected.post-<?php echo $post->ID; ?> {
    background: linear-gradient( rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url("<?php echo $url; ?>") no-repeat ;
    background-position: 100 0;
    background-size: cover;
    opacity: .8;
    transition: background .5s;
}