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の数行を追加することによって達成することができます。

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

Answer 2

あなたの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である必要があります。

希望すると助かります！