Question

我尝试了但是我失败了，我想在箭头导航中显示下一个滑块图像，如下图所示：

我几乎达到了预期的效果但不起作用：

如果您点击上方的圆圈，编号2并继续此工作，但如果您单击上一个与滑块或下一个箭头的关系不同步的圆圈。

  var images = [];
$('#slider img').each(function () {
    images.push($(this));
    $(this).hide();
});

var imgcount = images.length;
var currentItem = 0;
images[currentItem].show();

var imagesrc = $('#slider').children('img').map(function(){
    return $(this).attr('src')
}).get()


pcounter = imgcount-1;
$('.setimageleft').css({'background-image': 'url(' + imagesrc[pcounter] + ')',});

ncounter = 1;
$('.setimage').css({'background-image': 'url(' + imagesrc[ncounter] + ')',});

var imgglobal = 1;

$('#next').click(function () {
    imgglobal++;
    $('.setimage').css({'background-image': 'url(' + imagesrc[imgglobal] + ')',});
    images[currentItem].hide();
    currentItem = (currentItem + 1) % imgcount;
    images[currentItem].show();
});

$('#prev').click(function () {
    imgglobal--;
    $('.setimageleft').css({'background-image': 'url(' + imagesrc[imgglobal] + ')',});
    images[currentItem].hide();
    if (currentItem > 0) currentItem--;
    else currentItem = imgcount - 1;
    images[currentItem].show();
});

请您告诉我错误在哪里，或者让我知道如何实现效果，感谢阅读。

Answer 1

我认为您应该更好地使用currentItem而不是另一个计数器，请参阅以下内容：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body{
      margin: 0px;
      padding: 0px;
      overflow:hidden;
    }
    .conta{margin: 0 auto;
    width: 300px; position:relative;}
    .contasli #next, .contasli #prev{
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    border-radius: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    }
    .npconta{position:absolute;z-index:3;
    top: 50%;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    min-height: 70px;
    min-width: 70px;
    overflow: hidden;
    }
    .contasli #prev{background:#ccc;}
    .contasli #next{background:#ccc;}
    .contasli .npconta.left{left:0;}
    .contasli .npconta.right{right:0;}
    #slider img{left: 0;
        position: absolute;
        transition: opacity 1s ease-in-out 0s;
        max-width: 100%;
        width:100%;
      z-index:1;}

      .setimage, .setimageleft{background-position: center center;
    background-size: cover;
    border-radius: 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    }
  </style>
</head>
<body>
<div class="conta">
<div id="slider">
    <img src="http://dummyimage.com/600x400/000/fff&text=1.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=2.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=3.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=4.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=5.jpg" alt="" />
    <br>


</div>

<div class="contasli">
<div class="npconta left">
<div id="prev"><div class="setimageleft"></div></div>
</div>

<div class="npconta right">
<div id="next"><div class="setimage"></div></div>
</div>
</div>

</div>
  <script>
    var images = [];
    $('#slider img').each(function () {
        images.push($(this));
        $(this).hide();
    });

    var imgcount = images.length;
    var currentItem = 0;
    images[currentItem].show();

    var imagesrc = $('#slider').children('img').map(function(){
        return $(this).attr('src')
    }).get()


    pcounter = imgcount-1;
    $('.setimageleft').css({'background-image': 'url(' + imagesrc[pcounter] + ')',});

    ncounter = 1;
    $('.setimage').css({'background-image': 'url(' + imagesrc[ncounter] + ')',});

    $('#next').click(function () {
        images[currentItem].hide();
        currentItem = (currentItem + 1) % imgcount;
        images[currentItem].show();
        calcButtons();
    });

    $('#prev').click(function () {
        images[currentItem].hide();
        if (currentItem > 0) currentItem--;
        else currentItem = imgcount - 1;
        images[currentItem].show();
        calcButtons();
    });
    
    function calcButtons(){
      if(currentItem>0)
          $('.setimageleft').css({'background-image':'url(' + imagesrc[currentItem - 1] + ')',});
        else
          $('.setimageleft').css({'background-image':'url(' + imagesrc[imgcount-1] + ')',});
      
      if(currentItem<imgcount-1)
          $('.setimage').css({'background-image':'url(' + imagesrc[currentItem + 1] + ')',});
        else
          $('.setimage').css({'background-image':'url(' + imagesrc[0] + ')',});
    }
  </script>
</body>
</html>

我还将方法集中到calc按钮状态，因此您无需同步它们。希望能帮助到你。再见

循环事件单击jquery同步当前状态

1 个答案: