如何在jQuery中鼠标悬停在鼠标悬停上显示和隐藏下一个按钮

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

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/

这只能通过添加几行CSS来完成：

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

我已经在下面的演示中实现了它。

(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'
  });
});

.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;
  }
}

<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>

您应该创建一个新类，称为CSS文件中的"隐藏"：

.hidden{
  display: none;
}

然后在您的JS和VOILA上添加此代码！

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

" #container" ID应该是图像滑块容器的ID。

希望它有帮助！

相关内容

最新更新

热门标签：