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

Question

我以前从未使用过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);                                
         });
    }

当您仅将图像悬停在图像上时，我应该应用哪些更改以使这些按钮显示？

先感谢您！

PS：这是请求的滑块的jsfiddle： https ://jsfiddle.net/6bcum4ee/

Answer 1

您应该在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。

希望能帮助到你！

Answer 2

这可以通过仅添加几行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>