Javascript jQuery Carousel-仅单击一个缩略图,显示一个div并隐藏下一个缩略图的onclick
伙计们,我在用这个旋转木马做我们的一个办公室项目。基本上在这个旋转木马中,将有一个主滑块和下面的小缩略图。当你点击缩略图时,上面的大图就会打开 在缩略图中,将隐藏一个div。单击缩略图时,将显示div。单击下一个缩略图时,上一个缩略图中的div将隐藏 我是jQuery的新手。任何帮助都会很好。这是密码-Javascript jQuery Carousel-仅单击一个缩略图,显示一个div并隐藏下一个缩略图的onclick,javascript,jquery,Javascript,Jquery,伙计们,我在用这个旋转木马做我们的一个办公室项目。基本上在这个旋转木马中,将有一个主滑块和下面的小缩略图。当你点击缩略图时,上面的大图就会打开 在缩略图中,将隐藏一个div。单击缩略图时,将显示div。单击下一个缩略图时,上一个缩略图中的div将隐藏 我是jQuery的新手。任何帮助都会很好。这是密码- <div id="slider-wrap"> <div class="container-fluid" style="padding:0px">
<div id="slider-wrap">
<div class="container-fluid" style="padding:0px">
<div class="slider-for">
<div class="single-item">
<div>
<p>Buy 20 VCHR get <br/>1 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-1.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 40 VCHR get <br/>2 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-2.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 60 VCHR get <br/>3 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-3.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 80 VCHR get <br/>4 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-4.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 100 VCHR get <br/>5 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-5.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="container-fluid" style="padding:0px">
<div class="slider-nav">
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-1.jpg" alt="">
</div>
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-2.jpg" alt="">
</div>
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-3.jpg" alt="">
</div>
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-4.jpg" alt="">
</div>
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-5.jpg" alt="">
</div>
</div>
</div>
</div>
这可以通过以下方式实现: 使用jquery数据属性并将每个滑块图像的索引设置为缩略图
<div id="slider-wrap">
<div class="container-fluid" style="padding:0px">
<div class="slider-for">
<div class="single-item">
<div>
<p>Buy 20 VCHR get <br/>1 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-1.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 40 VCHR get <br/>2 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-2.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 60 VCHR get <br/>3 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-3.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 80 VCHR get <br/>4 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-4.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 100 VCHR get <br/>5 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-5.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="container-fluid" style="padding:0px">
<div class="slider-nav">
<div class="slider-nav-single-item" data-slide-index="0">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-1.jpg" alt="">
</div>
<div class="slider-nav-single-item" data-slide-index="1">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-2.jpg" alt="">
</div>
<div class="slider-nav-single-item" data-slide-index="2">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-3.jpg" alt="">
</div>
<div class="slider-nav-single-item" data-slide-index="3">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-4.jpg" alt="">
</div>
<div class="slider-nav-single-item" data-slide-index="4">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-5.jpg" alt="">
</div>
</div>
</div>
试试这个。希望这能奏效。我以前没用过这个图书馆
<div id="slider-wrap">
<div class="container-fluid" style="padding:0px">
<div class="slider-for">
<div class="single-item">
<div>
<p>Buy 20 VCHR get <br/>1 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-1.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 40 VCHR get <br/>2 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-2.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 60 VCHR get <br/>3 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-3.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 80 VCHR get <br/>4 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-4.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 100 VCHR get <br/>5 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-5.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="container-fluid" style="padding:0px">
<div class="slider-nav">
<div class="slider-nav-single-item" data-slide-index="0">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-1.jpg" alt="">
</div>
<div class="slider-nav-single-item" data-slide-index="1">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-2.jpg" alt="">
</div>
<div class="slider-nav-single-item" data-slide-index="2">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-3.jpg" alt="">
</div>
<div class="slider-nav-single-item" data-slide-index="3">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-4.jpg" alt="">
</div>
<div class="slider-nav-single-item" data-slide-index="4">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-5.jpg" alt="">
</div>
</div>
</div>
$('.slider-nav-single-item').click(function () {
var index = $(this).data('slideIndex');
$( '.slider-for' ).slickGoTo( parseInt(index) );
});