我有以下代码:
$(document).ready(function(){
$('.porslider > .slides > li > div > ul > li').click(function() {
var which = $(this).index();
$('#big').find('div').hide().eq(which).show();
});
});
当我点击一个 li 元素时,会出现一个 div。这是工作。但不是当我把它放在 flexslider 中时。我的 HTML 看起来像这样。
<div class="flexslider porslider">
<ul class="slides">
<li>
<div>
<ul class="porimages ulpor">
<li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
<li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
<li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
<li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
<li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
</ul>
</div>
</li>
<li>
<div>
<ul class="porimages ulpor">
<li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
<li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
<li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
<li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
<li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
</ul>
</div>
</li>
</ul>
</div>
<div id="big">
<div><img src="por_big/piWD00001.png" /></div>
<div><img style="opacity: 0.5;" src="por_big/piWD00001.png" /></div>
<div><img style="border: 2px solid red;" src="por_big/piWD00001.png" /></div>
<div><img src="por_big/piWD00001.png" /></div>
<div><img src="por_big/piWD00001.png" /></div>
<div><img src="por_big/piWD00001.png" /></div>
<div><img style="opacity: 0.1;" src="por_big/piWD00001.png" /></div>
<div><img style="border: 2px solid blue;" src="por_big/piWD00001.png" /></div>
<div><img src="por_big/piWD00001.png" /></div>
<div><img src="por_big/piWD00001.png" /></div>
</div>
我的 CSS 看起来像这样:
#big div {
display: none;
}
有没有一种简单的方法让他也看到第二张幻灯片?现在他只看到前五个缩略图,但我想要的是更多幻灯片。因此,当人们转到第二张幻灯片时,他们也会看到相同的图像,但更大。如何在更多幻灯片上使用此脚本?
谢谢!
最佳答案
试试这个开始,看看它是否有效...我认为 Flexslider 在您的 HTML 中包装了一些东西,使您的(丑陋的)选择器无法工作。
$('.porimages > li').click(function() {
var which = $(this).index();
$('#big').find('div').hide().eq(which).show();
});
或
$('.porslider li li').click(function() {
var which = $(this).index();
$('#big').find('div').hide().eq(which).show();
});
关于Jquery flexslid 点击 div 并显示一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19277387/