Question

我正在使用wordpress插件WP精选内容滑块，它使用jquery.cycle.all.2.72.js。我得到了一个非常奇怪的视觉故障。在页面加载时，所有幻灯片都显示在彼此之上，然后当脚本循环浏览每张幻灯片时，有时它最终自行修复（直到页面重新加载）。

我在这个论坛上找到了另一个主题，其中列出了同样的问题和解决方案jQuery Cycle Slides overlap on page load

但我不是技术人员。有人告诉我，我需要在wordpress自托管博客中将上述解决方案中建议的代码放在哪里。

在此处查找示例http://ramblingego.com

内容滑块PHP代码如下

<?php
$direct_path =  get_bloginfo('wpurl')."/wp-content/plugins/wp-featured-content-slider";
?>

<script type="text/javascript">
    jQuery('#featured_slider ul').cycle({ 
        fx: '<?php $effect = get_option('effect'); if(!empty($effect)) {echo $effect;} else {echo "scrollLeft";}?>',
        prev: '.feat_prev',
        next: '.feat_next',
        speed:  800, 
        timeout: <?php $timeout = get_option('timeout'); if(!empty($timeout)) {echo $timeout;} else {echo 4000;}?>, 
        pager:  null
    });
</script>

<style>

#featured_slider {
float: left;
margin: 10px 0px;
position: relative;
background-color: #<?php $bg = get_option('feat_bg'); if(!empty($bg)) {echo $bg;} else {echo "FFF";}?>;
border: 1px solid #<?php $border = get_option('feat_border'); if(!empty($border)) {echo $border;} else {echo "CCC";}?>;
width: <?php $width = get_option('feat_width'); if(!empty($width)) {echo $width;} else {echo "860";}?>px;
}

#featured_slider ul, #featured_slider ul li {
list-style: none !important;
border: none !important;
float: left;
margin: 10px;
width: <?php $width = get_option('feat_width'); if(!empty($width)) {echo $width;} else {echo "860";}?>px;
height: <?php $height = get_option('feat_height'); if(!empty($height)) {echo $height;} else {echo "210";}?>px;
}

#featured_slider .img_right {
float: left;
width: <?php $img_width = get_option('img_width'); if(!empty($img_width)) {echo $img_width;} else {echo "320";}?>px;
height: <?php $img_height = get_option('img_height'); if(!empty($img_height)) {echo $img_height;} else {echo "200";}?>px;
margin-left: 20px;
}

#featured_slider .img_right img {
width: <?php $img_width = get_option('img_width'); if(!empty($img_width)) {echo $img_width;} else {echo "320";}?>px;
height: <?php $img_height = get_option('img_height'); if(!empty($img_height)) {echo $img_height;} else {echo "200";}?>px;
}

#featured_slider .content_left {
float: left;
color: #<?php $text_color = get_option('text_color'); if(!empty($text_color)) {echo $text_color;} else {echo "333";}?>;
width: <?php $text_width = get_option('text_width'); if(!empty($text_width)) {echo $text_width;} else {echo "450";}?>px;
}

#featured_slider .content_left p {
line-height: 22px !important;
color: #<?php $text_color = get_option('text_color'); if(!empty($text_color)) {echo $text_color;} else {echo "333";}?>;
}

#featured_slider .content_left h2 {
font-size: 20px !important;
margin-bottom: 20px;
}

#featured_slider .feat_prev {
background: transparent url(<?php echo $direct_path;?>/images/sprite.png) no-repeat;
background-position: 0px 0px;
width: 17px;
z-index: 10;
height: 16px;
position: absolute;
left: 20px;
cursor: pointer;
bottom: 30px;
float: left;
}

#featured_slider .feat_prev:hover {
background-position: 0px -16px;
}

#featured_slider .feat_next {
background: transparent url(<?php echo $direct_path;?>/images/sprite.png) no-repeat;
background-position: -17px 0px;
width: 17px;
z-index: 10;
height: 16px;
position: absolute;
left: 40px;
bottom: 30px;
cursor: pointer;
}

#featured_slider .feat_next:hover {
background-position: -18px -16px;
}

</style>

<div id="featured_slider">


    <ul id="slider">

        <?php

        $sort = get_option('sort'); if(empty($sort)){$sort = "post_date";}
        $order = get_option('order'); if(empty($order)){$order = "DESC";}
        $limit = get_option('limit'); if(empty($limit)){$limit = 350;}
        $points = get_option('points'); if(empty($points)){$points = "...";}
        $post_limit = get_option('limit_posts'); if(empty($limit_posts)){$limit_posts = "-1";}

        global $wpdb;

        global $post;

        $args = array( 'meta_key' => 'feat_slider', 'meta_value'=> '1', 'suppress_filters' => 0, 'post_type' => array('post', 'page'), 'orderby' => $sort, 'order' => $order, 'numberposts'=> $post_limit);

        $myposts = get_posts( $args );


        foreach( $myposts as $post ) :  setup_postdata($post);

            $custom = get_post_custom($post->ID);

            $thumb = get_wp_generated_thumb("feat_slider");

        ?>

        <li><div class="content_left"><h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2><?php echo cut_text_feat(get_the_content(), $limit, $points);?></div><div class="img_right"><a href="<?php the_permalink();?>"><img src="<?php echo $thumb;?>" /></a></div></li>

        <?php endforeach; ?>

    </ul>

    <div class="feat_next"></div>
    <div class="feat_prev"></div>


</div>

Answer 1

如果您无法使用display：hidden输出所有幻灯片，则可以使用jquery隐藏所有幻灯片（第一个除外），然后循环插件应该完成剩下的工作。

像这样：

<script type="text/javascript">
    jQuery('#featured_slider ul>li:gt(0)').hide(function() {

        jQuery('#featured_slider ul').cycle({ 
        fx: '<?php $effect = get_option('effect'); if(!empty($effect)) {echo $effect;} else {echo "scrollLeft";}?>',
        prev: '.feat_prev',
        next: '.feat_next',
        speed:  800, 
        timeout: <?php $timeout = get_option('timeout'); if(!empty($timeout)) {echo $timeout;} else {echo 4000;}?>, 
        pager:  null
    });

});

在Wordpress Blog上页面加载时，Jquery循环幻灯片重叠

1 个答案: