0

我想在我的网站的一页上显示多个幻灯片。我正在使用中继器 ACF 来输入我的图像。我无法提前知道要显示多少幻灯片

当显示一个幻灯片时，一切正常，但是当显示 2 个时，它不再工作了。

有谁知道我该如何解决？

这是一个没有中继器和 2 个幻灯片的基本代码：

http://jsfiddle.net/XRpeA/13/

<div id="slideframe">
    <img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
    <img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
    <img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
    <div id="counter">image <span id="current">1</span> / <span id="total"></span></div>

 <br><br>

<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>

这是我的中继器代码：

http://jsfiddle.net/XRpeA/14/

<?php if(get_field('images')): ?>

<div id="counter_2"><span id="current">1</span> / <span id="total"></span></div>
    <div id="slideframe">

    <?php while(has_sub_field('images')): ?>
        <?php if(get_sub_field('image') != ''){ ?>
<img class="image_news" src="<?php the_sub_field('image'); ?>"/>

<?php } ?>
<?php endwhile; ?> 
</div>

<?php endif; ?>

多谢

4

1 回答 1

0

好的，所以我只是按照我的承诺为你做的，以为我认为它会更快:)

结果

http://skyloveagency.com/new/ （明天将删除）

领域：

photo_repeater -中继器

---photo_slider -中继器

------photo_block -带有 URL 输出的图像

完整的脚本，未优化但完美运行

<?php
/**
* Template Name: Profiles2 
*/

get_header(); ?>

<?php

// query

$args = array(

'post_type'          => 'profiles',

'show'               => 1

);

$wp_query = new WP_Query($args);

?>



<?php $random = 0;  
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php if(get_field('photo_repeater')): ?>

<?php while(has_sub_field('photo_repeater')): ?>

<?php $random++;  ?>        
<div id="slideframe<?php echo $random; ?>">

    <?php if(get_sub_field('photo_slider')): ?>

         <?php while( has_sub_field('photo_slider') ): ?> 

            <?php 
        $img_url = get_sub_field('photo_block');
        $image = aq_resize( $img_url, 200, 200, true );
        ?>
        <img class="image_news" src="<?php echo $image; ?>"  alt="111" />
         <?php endwhile; ?>     

    <?php endif; ?>

</div>
<br>
<div id="counter<?php echo $random; ?>">image <span id="current<?php echo $random; ?>">1</span> / <span id="total<?php echo $random; ?>"></span></div>

<script>
var count<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news').length;
$("#total<?php echo $random; ?>").text(count<?php echo $random; ?>);
// set display:none for all members of ".pic" class except the first
$('#slideframe<?php echo $random; ?> .image_news:gt(0)').hide();

// stores all matches for class="pic"
var $slides<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news');

$slides<?php echo $random; ?>.click(function () {
// stores the currently-visible slide
var $current<?php echo $random; ?> = $(this);
if ($current<?php echo $random; ?>.is($slides<?php echo $random; ?>.last())) {
     $("#current<?php echo $random; ?>").text("1");
     $current<?php echo $random; ?>.hide();
     $slides<?php echo $random; ?>.first().show();
 }
// else, hide current slide and show the next one
else {
$("#current<?php echo $random; ?>").text($current<?php echo $random; ?>.next().index()+1);
$current<?php echo $random; ?>.hide().next().show();
    }
});
</script>
<br><br>    

<?php endwhile; ?> 


<?php endif; ?>     

<?php endwhile;  ?>

<?php get_footer(); ?>
于 2013-11-14T03:06:18.893 回答