Question

我正在使用wordpress，这是我的代码，位于右侧边栏

<?php
            $custom_fields = get_post_custom($post->ID);
            $my_custom_field_img = $custom_fields['sidebarimage'];
            $my_custom_field_desc = $custom_fields['imagedesc'];
            $results = count($my_custom_field_img);
            $i=0;

            if ($my_custom_field_img != null) { ?>
                <div id="right-sidebar">
                    <?php while($i<$results){ ?>
                            <div id="rightimagediv" class="imagediv">
                        <a href="<?php echo $my_custom_field_img[$i]; ?>" rel="testing"><img  id="rightimage" src="<?php echo $my_custom_field_img[$i]; ?>" width="217px" height="150" /></a>
                        </div>
                        <?php if($mycustom_field_desc[$i] != null)?>
                            <span id="imagetext"><?php echo $my_custom_field_desc[$i]; ?></span>                            
                    <?php $i++; } ?>
                </div>
            <?php } ?>

这是我在JonRaasch博客中使用的简单幻灯片

function slideSwitch() {
var $active = $('#rightimagediv IMG.active');

if ( $active.length == 0 ) $active = $('#rightimagediv IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#rightimagediv IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });

它有效，图像在彼此之上，但事情就是当它逐渐消失时它会一直回到第一张图像..任何帮助都会很高兴欣赏... Thanx提前！:)

这是css：

#rightimagediv .imagediv{
        position:relative;
        height:150px;
        }

        #rightimagediv img{
        position:absolute;
        top:0px;
        left:0px;
        z-index:8;
        }

        #rightimagediv img.active {
        z-index:10;
        }

        #rightimagediv img.last-active {
        z-index:9;
        }

Answer 1

这是因为你的所有图片都是用链接标签单独包装的，所以没有兄弟姐妹。您可以重新编写<a>代码而不是<img>，也可以修补错误补丁：

var $next =  $active.parent().next().children().length ? $active.parent().next().children() : $('#rightimagediv IMG:first');

但这依赖于每个链接只有一个孩子和一些其他东西......

自定义图像数组不适用于简单的滑块

1 个答案: