我有一个 jquery 幻灯片,它使用导航列表来切换幻灯片图像。它的工作原理是当您将鼠标悬停在它突出显示的导航列表('.active')上并且关联的图像切换到该列表时。导航列表内有链接,也可以单击以转到不同的页面。
我需要在平板电脑上使用它,这样当用户点击导航列表时,它会变为活动状态,然后图像幻灯片切换,然后如果再次点击,它会进入该链接。现在发生的事情是,只要您点击它,它就会变得活跃并点击。
这是jquery
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").hover(function(e){
//Set Variables
e.preventDefault();
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.8, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
});
这是导航列表的 html
<div class="image_thumb">
<ul>
<li id="one">
<h2><a href="styleguide.html">Text Text Text</a></h2>
<p><a href="styleguide.html">Text Text Text</a></p>
<a class="imgloc" href="content/images/home/01.jpg"></a>
<div class="block">
<p>Text Text Text</p>
</div>
</li>
</ul>
</div>
这是它如何工作的示例: ocgoodwill.org
如果有人可以提供帮助,那就太好了!
- 编辑 -
我还想补充一点,如果用户点击了其中一个元素,然后点击了另一个元素,则需要重置第一个元素,这样如果他们再次点击它,它就不会自动点击。