Question

HTML：

<div class="inline-wrapper">
  <div class="inline-blocks" id="f">123</div>
  <div class="inline-blocks" id="s">123</div>
  <div class="inline-blocks" id="t">123</div>
  <div class="inline-blocks" id="fo">123</div>
</div>

CSS：

html, body {
  width: 100%;
  height: 100%;
/*  overflow: hidden;*/
}

.inline-wrapper{
  width: 400%;
  height: 100%;
  font-size: 0;
  position: relative;
}

.inline-blocks{
  display: inline-block;
  width: 25%;
  height: 100%;
  vertical-align: top;
  position: relative;
}

>.inline-blocks:nth-child(1){
  background-color: #000;
}

.inline-blocks:nth-child(2){
  background-color: blue;
}

.inline-blocks:nth-child(3){
  background-color: red;
}

.inline-blocks:nth-child(4){
  background-color: green;
}

如何在没有ID的情况下滑动它们？实际上这是滑块的工作。但我无法理解逻辑。想了解如何在没有ID的情况下翻转。我们必须检查这些街区并给他们当前的课程。

Answer 1

自动滑动

HTML：

<div class="inline-wrapper">
    <div class="inline-blocks" id="f">123</div>
    <div class="inline-blocks" id="s">123</div>
    <div class="inline-blocks" id="t">123</div>
    <div class="inline-blocks" id="fo">123</div>
</div>

jQuery的：

(function () {
    var numDivs = $('.inline-wrapper').children().length; //Count children ELements
    var counter = 1;

    function slide(time, counter) {
        var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
        var position = $currentDiv.position(); //get position of next element

        if (numDivs > 1) {
            $('html,body').animate({
                scrollLeft: position.left
            }, time / 2); //Animate to next element
        }
    };

    $('.inline-blocks').on('click', function () {
        counter = counter + 1;
        slide(2000, counter);
    });
})();

DEMO

滑到下一个div

1 个答案: