我的主页上有一个幻灯片,使用jQuery Cycle 插件。标记非常简单,我将#slide ul
其用作幻灯片容器和#slide ul li
每张幻灯片。在每个幻灯片项目中,它都会在帖子缩略图的顶部显示标题。
当您将鼠标悬停在缩略图上时,内容摘录会淡入,当您将鼠标悬停在图像之外时,内容摘录会淡出。我面临的问题是,当我将鼠标悬停在其中一个缩略图上时,所有内容摘录都会淡入(当然,您看不到其他内容,但我知道它们会这样做,因为当幻灯片切换到新幻灯片时,下一张幻灯片的内容摘录已经显示)。
我需要知道的是,我怎样才能只制作特定幻灯片的内容摘录淡入淡出,而不是使用 jQuery 制作全部内容?
希望有人能回答我的问题,我总是投票并选择最佳答案。
这是我的 jQuery 代码:
$(document).ready(function() {
$('#slide ul').cycle({
fx: 'turnDown',
next: '#slidenext',
prev: '#slideprev',
speed: 600,
delay: 3000
});
$('#slide ul').hover(function() {
$(this).cycle('pause');
$('#slideshow ul .text, #slideshow ul .more').animate({opacity: 'show'});
},function() {
$(this).cycle('resume');
$('#slideshow ul .text, #slideshow ul .more').animate({opacity: 'hide'});
});
$('#slidenext, #slideprev').click(function() {
$('#slideshow ul .text, #slideshow ul .more').animate({opacity: 'hide'});
});
});
对于幻灯片:
<div id="slide">
<ul>
<?php $my_query = new WP_Query('posts_per_page=3');
if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li>
<!-- slide content -->
<img src="<?php bloginfo('template_url'); ?>/images/slide-post-thumb.png" width="750" height="220" alt="" />
<h1><a href="<?php the_permalink(); ?>" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<div class="text"><?php the_excerpt(); ?></div>
<div class="more"><a href="<?php the_permalink(); ?>" title="Read the story <?php the_title(); ?>">Read Story</a></div>
</li>
<?php endwhile; else : ?>
<p>Sorry, no posts found!</p>
<?php endif; ?>
</ul>
</div>