文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >一个缩略图的jQuery旋转木马，显示一个div并隐藏下一个缩略图的点击

问一个缩略图的jQuery旋转木马，显示一个div并隐藏下一个缩略图的点击
EN

Stack Overflow用户
提问于 2015-03-31 06:41:29
回答 1查看 1.5K关注 0票数 0

伙计们，我用这个旋转木马http://kenwheeler.github.io/slick/做我们的一个办公室项目。基本上，在这个旋转木马，将有一个主要滑块和小缩略图下面。当你点击缩略图时，上面的大图片就会打开。

在缩略图中，会隐藏一个div。当你点击缩略图时，div就会出现。当你点击下一个缩略图时，前一个缩略图中的div就会隐藏。

我是jQuery的新手。任何帮助都会很好。这是密码-

代码语言：javascript
复制
<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 -

代码语言：javascript
复制
$(document).ready(function () {
        $('.slider-for').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true,
            arrows: false,
            asNavFor: '.slider-nav',
            mobileFirst: true,
            respondTo: true,
        });

        $('.slider-nav').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.slider-for',
            dots: false,
            centerMode: true,
            centerPadding: '17%',
            arrows: false,
            focusOnSelect: true,
            mobileFirst: true,
            respondTo: true,
        });

        $('.single-item').slick({
            dots: false,
            arrows: false,
            mobileFirst: true,
            respondTo: true,
        });
    });


    $(document).ready(function () {            
        $('.slider-nav-single-item').click(function () {
            $(this).children().show();                
        });  
    });
javascript
jquery
EN

回答 1

Stack Overflow用户

发布于 2015-03-31 07:37:59

这是可以做到的：

使用jquery数据属性并将每个滑块图像的索引设置为缩略图

代码语言：javascript
复制
<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>

然后单击“使用”

slickGoTo函数

代码语言：javascript
复制
  $('.slider-nav-single-item').click(function () {
        var index = $(this).data('slideIndex'); 
        $( '.slider-for' ).slickGoTo( parseInt(index) ); 
  });

尝尝这个。希望这样能行。我以前没用过这个图书馆。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/29362198

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档