我一直在使用这个 JQuery 图像轮播一段时间，并且非常接近......但是有一些事情不太正确:(
我正在使用 JCarousel Light 插件（http://www.gmarwaha.com/jquery/jcarousellite/），它工作得很好......我想做的就是在缩略图悬停时出现一个大图像超过。
通常我会直接做这个，代码很简单（事实上，我在网站的其他部分已经准备好了）。它不能那样工作的原因是元素上有一个溢出：隐藏属性。
那是我发现 JQuery 偏移属性的时候......唯一的问题是它在所有浏览器中呈现不同（或者至少我使用的代码是这样）。
然后我尝试了 JQuery 位置属性......但它跟随图像，所以当完整图像出现时它没有跟随滚动的轮播缩略图。
在所有浏览器中，我需要更改什么以使悬停在其上方居中的图像匹配缩略图？
我正在使用的当前 JQuery 如下所示：
<script type="text/javascript">
<!--
$(function() {
/* carousel-full */
jQuery(".photos a").hover(function() {
var offset = $(this).offset();
var id_post = $(this).attr("id");
jQuery(".carousel-full").find("div[id="+id_post+"]").css("left", (offset.left-265)+"px");
jQuery(".carousel-full").find("div[id="+id_post+"]").show();
}, function() {
jQuery(".carousel-full").find("div").hide();
});
/* carousel-thumbnails */
$(".photos").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 4,
});
});
//-->
</script>
我现在拥有的代码如下所示：
<div class="carousel-full">
<?php query_posts("category_name=photos&posts_per_page=-1"); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="<?php echo $post->ID; ?>"><?php the_post_thumbnail("carousel-full"); ?></div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="carousel-thumbnails">
<?php $styles = array('photo1','photo2'); $switch = count($styles); $start = 0; ?>
<?php query_posts( 'category_name=photos&posts_per_page=-1' ); ?>
<?php if ( have_posts() ) { ?>
<button class="prev"><!-- --></button>
<button class="next"><!-- --></button>
<div class="photos">
<ul>
<?php while ( have_posts() ) : the_post(); ?>
<li class="<?php echo $styles[$start++ % $switch]; ?>"><a href="" id="<?php echo $post->ID;?>"><?php the_post_thumbnail("carousel-thumbnails", array("title" => get_the_title(), "alt" => get_the_title()) ); ?></a></li>
<?php endwhile; ?>
</ul>
</div>
<?php } else { ?>
<p>Sorry, no pictures have been posted :(</p>
<?php } ?>
<?php wp_reset_query(); ?>
</div>
我希望我在 JQuery 方面做得更好……我错过了什么？提前致谢！！
Ps - 现场示例位于：http: //joshrodgers.com/ ...它在首页上 :)
乔什