使用jQuery下一步和上一次无法正常工作

Question

我正在研究下一节和上一节。当我点击下一个按钮然后它显示下一个div但它无法正常工作，因为下一步按钮正在无限工作。

与上一个按钮相同。当用户点击下一个按钮或滚动鼠标滚轮时，我需要隐藏页面加载时的上一个按钮，而不是显示上一个按钮。

我尝试了一些代码

new WOW().init();
	(function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('gentags').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
    }
})();

$('.navigation_right').click(function() {
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('.navigation_right').attr('disabled', true);
    }
    $('.navigation_left').attr('disabled', null);
});

$('.navigation_left').click(function() {
    $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('.navigation_left').attr('disabled', true);
    }
    $('.navigation_right').attr('disabled', null);
});

		#gentags {
position:fixed;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow: hidden;
}

#gentags > div{
    overflow: hidden;
    width:250%;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

.horizontal_scroll .full_screen_100 article{
    width: 11.58%;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}
.active_div{

display: none;
}

  /*Navigation style*/
  .horizontal_scroll_icon_pre_next {
    bottom: 50px;
    left: 0;
    
    position: fixed;
    
    width: 100%;
    height: 0;
   /* padding: 0 20px;*/
}
  .horizontal_scroll_icon_pre_next button{
  background-color: transparent;
border: none;
font-size: 0;
color: #7b7b7b;
display: none;
outline: 0;
cursor: pointer;
}
.horizontal_scroll_icon_pre_next button.navigation_left
{
	float: left;
}
.horizontal_scroll_icon_pre_next button.navigation_right
{
	float:right;
}

.horizontal_scroll_icon_pre_next button.active {
    display: block;
}
.horizontal_scroll_icon_pre_next button span {

    font-size: 30px;
}

	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
	    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"><!--icon-->
	<div class="active_div">
		<h2>I want to display this div when articles 7 comes on screen</h2>
	</div>

<div id="gentags">
<div class="horizontal_scroll">
		<div class="full_screen_100" id="left_scroll">
			<article class="wow fadeInUp first current"><div><p class="scroll_number">01</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">02</p><span class="page_slogan">Hover me and scroll mouse wheel </span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">03</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">04</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">05</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">06</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">07</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp last"><div><p class="scroll_number">08</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
	</div>
</div>
</div>


<div class="horizontal_scroll_icon_pre_next">
        <button class="navigation_left active"><span class="lnr lnr-arrow-left"></span>Previous</button>
        <button class="navigation_right active"><span class="lnr lnr-arrow-right"></span>Next</button>
    </div><!--horizontal_scroll_navigation-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

Answer 1

在现有代码中，您正在执行操作，然后检查禁用状况。相反，存储当前和下一个元素，如果下一个元素可用，则执行操作。因此，如果next/prev元素不可用，则不会执行任何操作，您也不必手动禁用/启用按钮。

在prev上，您必须显示前一个元素，但您还必须显示当前元素。

由于你不想直到最后一个元素，你可以做的是检查最后一个元素是否在屏幕上完全可见。如果可见，请禁用按钮，否则启用它。

function enableDisableButtonState(context, value) {
  $('[class^=navigation_]').attr('disabled', false);
  $(context).attr('disabled', value);
}

$('.navigation_right').click(function() {
  var current = $('.current');
  var nextEl = current.next();
  var lastArticle = $('article:last');
  if (nextEl.length > 0) {
    current.removeClass('current').hide();
    nextEl.addClass('current').show();
  }
  var isInBounds = lastArticle.position().left < ($(document).width() - lastArticle.width());
  enableDisableButtonState(this, isInBounds);
});

$('.navigation_left').click(function() {
  var current = $('.current');
  var prevEL = current.prev();
  if (prevEL.length > 0) {
    current.removeClass('current');
    prevEL.addClass('current').show();
  }
  enableDisableButtonState(this, prevEL.is(':first-child'));
});

示例代码：

＆＃13;

＆＃13;

new WOW().init();
(function() {
  function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.getElementById('gentags').scrollLeft -= (delta * 40); // Multiplied by 40
    e.preventDefault();
  }
  if (document.getElementById('gentags').addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    // IE 6/7/8
    document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
  }
})();

function enableDisableButtonState(context, value) {
  $('[class^=navigation_]').attr('disabled', false);
  $(context).attr('disabled', value);
}

$('.navigation_right').click(function() {
  var current = $('.current');
  var nextEl = current.next();
  var lastArticle = $('article:last');
  if (nextEl.length > 0) {
    current.removeClass('current').hide();
    nextEl.addClass('current').show();
  }
  var isInBounds = lastArticle.position().left < ($(document).width() - lastArticle.width());
  enableDisableButtonState(this, isInBounds);
});

$('.navigation_left').click(function() {
  var current = $('.current');
  var prevEL = current.prev();
  if (prevEL.length > 0) {
    current.removeClass('current');
    prevEL.addClass('current').show();
  }
  enableDisableButtonState(this, prevEL.is(':first-child'));
});

＆＃13;

#gentags {
  position: fixed;
  margin-top: -.25em;
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

#gentags>div {
  overflow: hidden;
  width: 250%;
}

::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}


/* optional: show position indicator in red */

::-webkit-scrollbar-thumb {
  background: transparent;
}

.horizontal_scroll .full_screen_100 article {
  width: 11.58%;
  height: 100%;
  float: left;
  border-left: solid 1px #E2E2E2;
}

.active_div {
  display: none;
}


/*Navigation style*/

.horizontal_scroll_icon_pre_next {
  bottom: 50px;
  left: 0;
  position: fixed;
  width: 100%;
  height: 0;
  /* padding: 0 20px;*/
}

.horizontal_scroll_icon_pre_next button {
  background-color: transparent;
  border: none;
  font-size: 0;
  color: #7b7b7b;
  display: none;
  outline: 0;
  cursor: pointer;
}

.horizontal_scroll_icon_pre_next button.navigation_left {
  float: left;
}

.horizontal_scroll_icon_pre_next button.navigation_right {
  float: right;
}

.horizontal_scroll_icon_pre_next button.active {
  display: block;
}

.horizontal_scroll_icon_pre_next button span {
  font-size: 30px;
}

.horizontal_scroll {
  overflow: hidden;
}

button[class^='navigation_'] {
  transition: 0.4s;
}

button[class^='navigation_']:disabled {
  opacity: 0.2;
  transition: 0.4s;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!--icon-->
<div class="active_div">
  <h2>I want to display this div when articles 7 comes on screen</h2>
</div>

<div id="gentags">
  <div class="horizontal_scroll">
    <div class="full_screen_100" id="left_scroll">
      <article class="wow fadeInUp first current">
        <div>
          <p class="scroll_number">01</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">02</p><span class="page_slogan">Hover me and scroll mouse wheel </span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">03</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">04</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">05</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">06</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">07</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp last">
        <div>
          <p class="scroll_number">08</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
    </div>
  </div>
</div>


<div class="horizontal_scroll_icon_pre_next">
  <button class="navigation_left active" disabled><span class="lnr lnr-arrow-left"></span>Previous</button>
  <button class="navigation_right active"><span class="lnr lnr-arrow-right"></span>Next</button>
</div>
<!--horizontal_scroll_navigation-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用代码中的一些更改

＆＃13;

＆＃13;

new WOW().init();
(function() {
  function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('gentags').scrollLeft -= (delta * 40); // Multiplied by 40
e.preventDefault();
  }
  if (document.getElementById('gentags').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
// IE 6/7/8
document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
  }
})();

$('.navigation_right').click(function() {
  var current = $('.current');
  var nextEl = current.next();

   if($('.current').hasClass('last'))
   {
 $('.navigation_right').removeClass('active');
 $('.navigation_left').addClass('active');
   }
  if(nextEl.length > 0) {
current.removeClass('current').hide();
nextEl.addClass('current').show();
  }
});

$('.navigation_left').click(function() {
  var current = $('.current');
  var prevEL = current.prev();
if($('.current').hasClass('first'))
{
 $('.navigation_left').removeClass('active');
$('.navigation_right').addClass('active');
}
  if(prevEL.length > 0) {
current.removeClass('current');
prevEL.addClass('current').show();
  }
});

＆＃13;

#gentags {
  position: fixed;
  margin-top: -.25em;
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

#gentags>div {
  overflow: hidden;
  width: 250%;
}

::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}


/* optional: show position indicator in red */

::-webkit-scrollbar-thumb {
  background: transparent;
}

.horizontal_scroll .full_screen_100 article {
  width: 11.58%;
  height: 100%;
  float: left;
  border-left: solid 1px #E2E2E2;
}

.active_div {
  display: none;
}


/*Navigation style*/

.horizontal_scroll_icon_pre_next {
  bottom: 50px;
  left: 0;
  position: fixed;
  width: 100%;
  height: 0;
  /* padding: 0 20px;*/
}

.horizontal_scroll_icon_pre_next button {
  background-color: transparent;
  border: none;
  font-size: 0;
  color: #7b7b7b;
  display: none;
  outline: 0;
  cursor: pointer;
}

.horizontal_scroll_icon_pre_next button.navigation_left {
  float: left;
}

.horizontal_scroll_icon_pre_next button.navigation_right {
  float: right;
}

.horizontal_scroll_icon_pre_next button.active {
  display: block;
}

.horizontal_scroll_icon_pre_next button span {
  font-size: 30px;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!--icon-->
<div class="active_div">
  <h2>I want to display this div when articles 7 comes on screen</h2>
</div>

<div id="gentags">
  <div class="horizontal_scroll">
    <div class="full_screen_100" id="left_scroll">
      <article class="wow fadeInUp first current">
        <div>
          <p class="scroll_number">01</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">02</p><span class="page_slogan">Hover me and scroll mouse wheel </span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">03</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">04</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">05</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">06</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">07</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp last">
        <div>
          <p class="scroll_number">08</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
    </div>
  </div>
</div>


<div class="horizontal_scroll_icon_pre_next">
  <button class="navigation_left active"><span class="lnr lnr-arrow-left"></span>Previous</button>
  <button class="navigation_right active"><span class="lnr lnr-arrow-right"></span>Next</button>
</div>
<!--horizontal_scroll_navigation-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

next()功能存在问题。

它一次只会移动一个框，它不会移动多个文本框。并且您正在添加＆＃39; 当前＆＃39;类到单个框并一次删除。

我建议你看看它：

  

http://www.menucool.com/jquery-slider

此插件中有许多自定义选项，因为您已经开始使用jquery了。

和平。