繁体   English   中英

jQuery Carousel-缩略图的Onlick,显示div并隐藏下一个缩略图的onclick

jQuery Carousel - Onlick of a thumbnail, show a div and hide onclick of next thumbnail

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

伙计们,我正在将此旋转木马http://kenwheeler.github.io/slick/用于我们的一个办公项目。 基本上,在此轮播中,下面会有一个主滑块和一些小缩略图。 单击缩略图时,大图将在上方打开。

在缩略图中,将隐藏一个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">
                   <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-

$(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();                
        });  
    }); 
1 个回复

可以这样实现:

使用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>

然后点击使用

slickGoTo函数

  $('.slider-nav-single-item').click(function () {
        var index = $(this).data('slideIndex'); 
        $( '.slider-for' ).slickGoTo( parseInt(index) ); 
  });  

尝试这个。 希望这应该工作。 我以前没有使用过这个库。

1 环球免税店-隐藏缩略图轮播div

我们正在使用Galleria库(http://galleria.io/)从一组用户选择的图像中动态生成幻灯片。 用户还可以选择一些选项,例如高度,宽度,过渡速度,显示/隐藏缩略图轮播等,并且这些设置将应用于Galleria选项。 现在,当用户选择隐藏转盘时,我设置了相关选项,使转盘中的缩 ...

2 jQuery缩略图轮播的问题

创建一个从flickr加载图像的jQuery轮播。 我的工作大部分都能正常进行,但是似乎无法弄清楚如何阻止旋转木马滚动到图像的末尾。 我一直在尝试计算缩略图所在的列表的宽度,但似乎只能得到可见区域的宽度。 这是小提琴: http : //jsfiddle.net/Eku5K/ 这 ...

3 带有缩略图的jQuery无限轮播

我正在制作一个滑块,但缩略图出现了一些问题,动画设置的速度快于主图像的淡入淡出,(经过几次拇指动画处理后,它们与主幻灯片的动画设置是异步的...他们需要处于同一时刻),它们具有相同的速度,所以我不明白为什么会产生此错误... jsFiddle: http : //jsfiddle.net ...

5 循环显示/隐藏缩略图

在wordpress循环中,要在链接点击时进行缩略图切换。 循环的一部分: JS: 它不起作用。 我单击“显示”链接,但没有任何反应。 你能帮助我吗? ...

6 将下一个和上一个按钮添加到Jquery Carousel的缩略图图像中

我有兴趣向现有的jquery轮播添加下一个和上一个按钮。 单击下一个按钮将选择先前选择的缩略图右侧的缩略图,因此也将更改较大的图片。 单击上一个按钮将导致选择左侧的缩略图。 循环是可选的,但更可取(在选择最后一个图像时单击右按钮应选择第一个图像,反之亦然)。 我在下面的脚本上附加了一 ...

7 JQuery onclick div隐藏/显示/重置下次点击

来自新手的简单问题: 如何在完成(500 毫秒)的时间后重置/重新启动功能,以便每次单击特定按钮时重复该功能? 代码工作的第一部分 淡出 500 毫秒后,我的 div 消失了 第二部分丢失 我需要重置功能才能立即重复......我想有一个非常简单的解决方案...... ...

8 jQuery onclick显示下一个隐藏第一个可见的div

我有一组div,我一次只想显示4。 默认情况下,当您单击下一步时,您会看到1,2,3,4,如果再单击下一步,则应看到2,3,4,5,如果您单击下一步,则应看到3,4,5,6,如果您单击上一个,则应看到1 ,2,3,4,如果您最初单击prev,我什么也不会发生。 当您到达终点时,我希望下次点击 ...

9 jQuery onclick隐藏/显示div

我有一个显示朋友请求的php文件,可以说有4个请求。 当用户单击接受或拒绝链接时,我想使用“ request_buttons”类隐藏div,但问题是它也隐藏了其他3个div,并且我只想隐藏按下链接的div。 我的html代码是: 和JavaScript是: LE:使用Ro ...

2012-02-06 12:05:30 3 3712   jquery
10 jQuery onclick div隐藏/显示

所以我想隐藏/显示3个不同的div。 我想跟踪显示的是哪个,以便可以使用下一个和后退功能。 这是我到目前为止的内容: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;cfoutput&gt;#g ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM