时间戳

首页 > 解决方案 > 带有滑块的jQuery图片库被代码卡住了

jquery - 带有滑块的jQuery图片库被代码卡住了

问题描述

试图在一页上制作多个带有幻灯片的图片库，但我坚持使用 jquery 代码，画廊无法正常工作。有人可以看看我的代码！？

这是我的 HTML 代码示例：

   <div class="slider" id="1">
       <div class="slider-show" id="slider-show-1">
          <div style="display: inline-block;">                                   
             <img src="some-image-link">
          </div>
          <div>
         <img src="some-image-link">                                     
          </div>
       </div> <!-- end of #slider-show -->

       <a href="javascript:void(0)" class="slider-prev" id="slider-prev-1"><</a>
       <a href="javascript:void(0)" class="slider-next" id="slider-next-1">></a>
    </div> <!-- end of #slider-1 -->

   <div class="slider" id="2">
       <div class="slider-show" id="slider-show-2">
          <div style="display: inline-block;">                                   
             <img src="some-image-link">
          </div>
          <div>
         <img src="some-image-link">                                     
          </div>
       </div> <!-- end of #slider-show -->

       <a href="javascript:void(0)" class="slider-prev" id="slider-prev-2"><</a>
       <a href="javascript:void(0)" class="slider-next" id="slider-next-2">></a>
    </div> <!-- end of #slider-2 -->

这是我的 Jquery 代码：

    $(document).ready(function() {
   var currentIndex = 0;
   var eventId = 0;
   items = $('#slider-show-1 div');
   itemAmt = items.length;

       $('.slider').mouseover(function() {
    eventId = $(this).attr('id');
    $('#slider-prev-'+eventId).show();
    $('#slider-next-'+eventId).show();
   });

   $('.slider').mouseout(function(){
    eventId = $(this).attr('id');
    $('#slider-prev-'+eventId).hide();
    $('#slider-next-'+eventId).hide();
   });

       $('.slider-next').click(function(e) {
    e.preventDefault();
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
    }

    var item = $('#slider-show-'+eventID div').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
   });

   $('.slider-prev').click(function(e) {
    e.preventDefault();
    currentIndex -= 1;
    if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
    }

            var item = $('#slider-show-'+eventID div').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
   });

我对 jquery 没有太多经验，所以有人可以纠正我的 jquery 代码，因为我知道它写错了，只是我不知道如何正确地做。

标签： jqueryimage-gallery

解决方案

你的代码有很多问题。正如 martincarlin87 所说，您将需要编辑

var item = $('#slider-show-'+eventID div')

到

var item = $('#slider-show-'+ eventID + ' div')

currentIndex，不能在两个滑块之间共享，否则在执行下一张/上一张幻灯片时会遇到问题。解决这个问题的一种方法是添加一个数组，每个位置都属于一个滑块。

您声明 eventId，但在某些行中调用 eventID。注意区分大小写的事情。

您在这里有一个由我修复的示例：

https://jsfiddle.net/48ta1692/

还要检查 HTML。我添加了一些更改，为您提供一个“不错”的滑块。

推荐阅读