如何在jQuery中鼠标悬停时显示和隐藏next / prev按钮？

时间：2016-12-27 15:07:29

标签： jquery html

我之前从未使用过Javascript，我需要一些帮助。我已经从网上下载了一个图像滑块脚本，但它缺少一个选项，可以在悬停时显示/隐藏上一个/下一个箭头。 这是代码的一部分：

if (config.showNextPrev==true){
         var nextPrevButton ='<a class="prev"></a>'; 
             nextPrevButton +='<a class="next"></a>'; 

         element.append(nextPrevButton);

         element.find('a.prev').click(function(){
             $.skdslider.prev(element,slides, config);                                     
         });

         element.find('a.next').click(function(){
              $.skdslider.next(element,slides, config);                                
         });
    }

当您仅悬停图片时，我应该应用哪些更改来显示这些按钮？

提前谢谢！

P.S。：这是滑块的jsfiddle：https://jsfiddle.net/6bcum4ee/

2 个答案:

答案 0 :(得分：1)

这可以通过添加几行CSS来实现：

.skdslider .prev, 
.skdslider .next {
  opacity: 0;
  transition: opacity .3s;
}
.skdslider:hover .prev,
.skdslider:hover .next {
  opacity: 1;
}

我已在下面的演示中实现了这一点。

＆＃13;
＆＃13; 
(function($) {
  $.skdslider = function(container, options) {
    // settings
    var config = {
      'delay': 2000,
      'animationSpeed': 500,
      'showNav': true,
      'autoSlide': true,
      'showNextPrev': false,
      'pauseOnHover': false,
      'numericNav': false,
      'showPlayButton': false,
      'animationType': 'fading',
      /* fading/sliding */
    };

    if (options) {
      $.extend(config, options);
    }
    // variables

    var touch = (("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch);


    $(container).wrap('<div class="skdslider"></div>');
    var element = $(container).closest('div.skdslider');
    element.find('ul').addClass('slides');
    var slides = element.find('ul.slides li');
    var targetSlide = 0;
    config.currentSlide = 0;
    config.currentState = 'pause';
    config.running = false;

    if (config.animationType == 'fading') {
      slides.each(function() {
        $(this).css({
          'position': 'absolute',
          'left': '0',
          'top': '0',
          'bottom': '0',
          'right': '0'
        });
      });
    }

    if (config.animationType == 'sliding') {
      slides.each(function() {
        $(this).css({
          'float': 'left',
          'display': 'block',
          'position': 'relative'
        });
      });

      var totalWidth = element.outerWidth() * slides.size();
      element.find('ul.slides').css({
        'position': 'absolute',
        'left': '0',
        'width': totalWidth
      });
      slides.css({
        'width': element.outerWidth(),
        'height': element.outerHeight()
      });

      $(window).resize(function() {
        var totalWidth = element.outerWidth() * slides.size();
        element.find('ul.slides').css({
          'position': 'absolute',
          'left': '0',
          'width': totalWidth
        });
        slides.css({
          'width': element.outerWidth(),
          'height': element.outerHeight()
        });
      });
    }

    //if (touch)
    $.skdslider.enableTouch(element, slides, config);

    $.skdslider.createNav(element, slides, config);
    slides.eq(targetSlide).show();
    if (config.autoSlide == true) {
      config.currentState = 'play';
      config.interval = setTimeout(function() {
        $.skdslider.playSlide(element, slides, config);
      }, config.delay);
    }

    if (config.pauseOnHover == true) {
      slides.hover(function() {
        if (config.autoSlide == true) {
          config.currentState = 'pause';
          clearTimeout(config.interval);
        }
      }, function() {
        if (config.autoSlide == true) {
          config.currentState = 'play';
          if (config.autoSlide == true) $.skdslider.playSlide(element, slides, config);
        }
      });
    }
  };


  $.skdslider.createNav = function(element, slides, config) {

    var slideSet = '<ul class="slide-navs">';
    for (i = 0; i < slides.length; i++) {
      var slideContent = '';
      if (config.numericNav == true) slideContent = (i + 1);
      if (i == 0)
        slideSet += '<li class="current-slide slide-nav-' + i + '"><a>' + slideContent + '</a></li>';
      else
        slideSet += '<li class="slide-nav-' + i + '"><a>' + slideContent + '</a></li>';
    }
    slideSet += '</ul>';



    if (config.showNav == true) {
      element.append(slideSet);
      var nav_width = element.find('.slide-navs')[0].offsetWidth;
      nav_width = parseInt((nav_width / 2));
      nav_width = (-1) * nav_width;
      element.find('.slide-navs').css('margin-left', nav_width);
      // Slide marker clicked
      element.find('.slide-navs li').click(function() {
        index = element.find('.slide-navs li').index(this);
        targetSlide = index;
        clearTimeout(config.interval);
        config.currentState = 'play';
        config.running = false;
        $.skdslider.playSlide(element, slides, config, targetSlide);
        return false;
      });
    }

    if (config.showNextPrev == true) {
      var nextPrevButton = '<a class="prev"></a>';
      nextPrevButton += '<a class="next"></a>';

      element.append(nextPrevButton);

      element.find('a.prev').click(function() {
        $.skdslider.prev(element, slides, config);
      });

      element.find('a.next').click(function() {
        $.skdslider.next(element, slides, config);
      });
    }

    if (config.showPlayButton == true) {

      var playPause = (config.currentState == 'play' || config.autoSlide == true) ? '<a class="play-control pause"></a>' : '<a class="play-control play"></a>';
      element.append(playPause);
      element.hover(function() {
        element.find('a.play-control').css('display', 'block');
      }, function() {
        element.find('a.play-control').css('display', 'none');
      });

      element.find('a.play-control').click(function() {

        if (config.autoSlide == true) {
          clearTimeout(config.interval);
          config.autoSlide = false;
          config.currentState = 'pause';
          $(this).addClass('play');
          $(this).removeClass('pause');
        } else {
          config.currentState = 'play';
          config.autoSlide = true;
          $(this).addClass('pause');
          $(this).removeClass('play');

          if ((config.currentSlide + 1) == slides.length) targetSlide = 0;
          else targetSlide = (config.currentSlide + 1);

          clearTimeout(config.interval);
          $.skdslider.playSlide(element, slides, config, targetSlide);
        }
        return false;
      });
    }

  };

  $.skdslider.next = function(element, slides, config) {
    if ((config.currentSlide + 1) == slides.length) targetSlide = 0;
    else targetSlide = (config.currentSlide + 1);

    clearTimeout(config.interval);
    config.currentState = 'play';
    $.skdslider.playSlide(element, slides, config, targetSlide);
    return false;
  }

  $.skdslider.prev = function(element, slides, config) {
    if (config.currentSlide == 0) targetSlide = (slides.length - 1);
    else targetSlide = (config.currentSlide - 1);

    clearTimeout(config.interval);
    config.currentState = 'play';
    config.running = false;
    $.skdslider.playSlide(element, slides, config, targetSlide);
    return true;
  }

  $.skdslider.prev = function(element, slides, config) {
    if (config.currentSlide == 0) targetSlide = (slides.length - 1);
    else targetSlide = (config.currentSlide - 1);

    clearTimeout(config.interval);
    config.currentState = 'play';
    config.running = false;
    $.skdslider.playSlide(element, slides, config, targetSlide);
    return true;
  }

  $.skdslider.playSlide = function(element, slides, config, targetSlide) {

    if (config.currentState == 'play' && config.running == false) {

      element.find('.slide-navs li').removeClass('current-slide');
      if (typeof(targetSlide) == 'undefined') {
        targetSlide = (config.currentSlide + 1 == slides.length) ? 0 : config.currentSlide + 1;
      }
      if (config.animationType == 'fading') {
        config.running = true;
        slides.eq(config.currentSlide).fadeOut(config.animationSpeed);
        slides.eq(targetSlide).fadeIn(config.animationSpeed, function() {
          $.skdslider.removeIEFilter($(this)[0]);
          config.running = false;
        });
      }
      if (config.animationType == 'sliding') {
        var left = (targetSlide * element.outerWidth()) * (-1);
        config.running = true;
        element.find('ul.slides').animate({
          left: left
        }, config.animationSpeed, function() {
          config.running = false;
        });
      }
      element.find('.slide-navs li').eq(targetSlide).addClass('current-slide');
      config.currentSlide = targetSlide;
    }

    if (config.autoSlide == true && config.currentState == 'play') {
      config.interval = setTimeout((function() {
        $.skdslider.playSlide(element, slides, config);
      }), config.delay);
    }
  };

  $.skdslider.enableTouch = function(element, slides, config) {
    element[0].addEventListener('touchstart', onTouchStart, false);
    var startX;
    var startY;
    var dx;
    var dy;

    function onTouchStart(e) {
      startX = e.touches[0].pageX;
      startY = e.touches[0].pageY;
      element[0].addEventListener('touchmove', onTouchMove, false);
      element[0].addEventListener('touchend', onTouchEnd, false);
    }

    function onTouchMove(e) {
      e.preventDefault();
      var x = e.touches[0].pageX;
      var y = e.touches[0].pageY;
      dx = startX - x;
      dy = startY - y;
    }

    function onTouchEnd(e) {
      element[0].removeEventListener('touchmove', onTouchMove, false);
      if (dx > 0) {
        $.skdslider.next(element, slides, config);
      } else {
        $.skdslider.prev(element, slides, config);
      }
      element[0].removeEventListener('touchend', onTouchEnd, false);
    }
  }


  $.skdslider.removeIEFilter = function(elm) {
    if (elm.style.removeAttribute) {
      elm.style.removeAttribute('filter');
    }
  }

  $.fn.skdslider = function(options) {
    return this.each(function() {
      (new $.skdslider(this, options));
    });
  };

})(jQuery);

jQuery(document).ready(function() {
  jQuery('#demo1').skdslider({
    'delay': 5000,
    'animationSpeed': 2000,
    'showNextPrev': true,
    'showPlayButton': true,
    'autoSlide': true,
    'animationType': 'fading'
  });
});
＆＃13; 
.skdslider {
  width: 100%;
  position: relative;
  display: block;
  overflow: hidden;
}
.skdslider:after {
  content: '';
  padding-top: 50%;
  display: block;
}
.skdslider ul.slides {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.skdslider ul.slides li {
  display: none;
}
.skdslider ul.slides li img {
  width: 100%;
  height: 100%;
  border: 0;
}
.skdslider ul.slide-navs {
  bottom: 20px;
  left: 50%;
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.skdslider ul.slide-navs li {
  float: left;
  background: url("http://i.imgur.com/9UXU2EB.png") no-repeat scroll 0 0 transparent;
  height: 12px;
  width: 12px;
  margin-right: 4px;
  cursor: pointer;
}
.skdslider ul.slide-navs li.current-slide {
  background: url("http://i.imgur.com/3Fk8eF7.png") no-repeat scroll 0 0 transparent;
}
.skdslider .slide-desc {
  background: url("http://i.imgur.com/pNWVJA6.png") repeat scroll 0 0 transparent;
  left: 0;
  padding: 0 15px 0 15px;
  position: absolute;
  bottom: 15%;
  max-width: 85%;
  display: inline-block;
}
.skdslider .slide-desc > h2 {
  color: #CFDB0C;
  font-family: 'Oswald';
  font-size: 25px;
  margin-bottom: 10px;
  margin-top: 10px;
  text-transform: uppercase;
}
.skdslider .slide-desc > p {
  color: #FFFFFF;
  font-family: 'Oswald';
  font-size: 16px;
  line-height: 20px;
  margin-top: 5px;
}
.skdslider .slide-desc > p a.more {
  color: #990000;
  font-size: 20px;
  text-decoration: none;
}
.skdslider .slide-desc > p a.more:hover {
  text-decoration: underline;
}
.skdslider a.prev {
  background: url("http://i.imgur.com/mFM1vMl.png") no-repeat scroll 0 0 transparent;
  width: 35px;
  height: 35px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 2%;
  margin-top: -17px;
}
.skdslider a.next {
  background: url("http://i.imgur.com/RA6U5UR.png") no-repeat scroll 0 0 transparent;
  width: 35px;
  height: 35px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 2%;
  margin-top: -17px;
}
.skdslider a.prev:hover {} .skdslider a.next:hover {} .skdslider a.play {
  background: url("http://i.imgur.com/IAQpz2I.png") no-repeat scroll center center transparent;
  width: 35px;
  height: 35px;
  display: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 48%;
  margin-top: -17px;
}
.skdslider a.pause {
  background: url("http://i.imgur.com/GJSzIao.png") no-repeat scroll center center transparent;
  width: 35px;
  height: 35px;
  display: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 48%;
  margin-top: -17px;
}

.skdslider .prev, 
.skdslider .next {
  opacity: 0;
  transition: opacity .3s;
}
.skdslider:hover .prev,
.skdslider:hover .next {
  opacity: 1;
}
/*Some Responsive CSS */

@media screen and (max-width: 767px) {
  .skdslider .slide-desc > h2 {
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  .skdslider .slide-desc > p {
    font-size: 14px;
    line-height: 15px;
    margin-top: 5px;
  }
  .skdslider .slide-desc > p a.more {
    font-size: 14px;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="demo1">
  <li>
    <img src="http://i.imgur.com/AR0YS3b.jpg" />
    <!--Slider Description example-->
    <div class="slide-desc">
      <h2>Slider Title 1</h2>
      <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a>
      </p>
    </div>
  </li>
  <li>
    <img src="http://i.imgur.com/XCtvfRz.jpg" />
    <div class="slide-desc">
      <h2>Slider Title 2</h2>
      <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a>
      </p>
    </div>
  </li>
  <li>
    <img src="http://i.imgur.com/PIwTgla.jpg" />
    <!--NO Description Here-->
  </li>
  <li>
    <img src="http://i.imgur.com/vW98xq4.jpg" />
    <div class="slide-desc">
      <h2>Slider Title 4</h2>
      <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a>
      </p>
    </div>
  </li>
  <li>
    <img src="http://i.imgur.com/IqB1qpp.jpg" />
  </li>
  <li>
    <img src="http://i.imgur.com/q4I0bto.jpg" />
    <div class="slide-desc">
      <h2>Slider Title 6</h2>
      <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a>
      </p>
    </div>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您应该在css文件中创建一个名为“hidden”的新类：

.hidden{
  display: none;
}

然后在你的js下面添加这个代码，瞧！

$( "#container" ).hover(function() {
  $( ".prev" ).removeClass( "hidden" );
  $( ".next" ).removeClass( "hidden" );
}, function() {
  $( ".prev" ).addClass( "hidden" );
  $( ".next" ).addClass( "hidden" );
});

“#container”id应该是图像滑块容器的id。

希望它有所帮助！

相关问题
最新问题