Question

我在这里有一个非常漂亮的滑块脚本，并且已经想到了它下面的子弹，但我只是想知道..是否可以添加一些简单的线条，以便图像暂停/保持时鼠标悬停？

现在是我的代码：

的jQuery

function googlemaps() {
    echo "<script>

    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: get_post_meta( get_the_ID(), '_lat', lng: get_post_meta( get_the_ID(), '_boyta'},
        zoom: 8
      });
    }

        </script>
    ";
}

CSS

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {

        $("#slideshow div:gt(0)").hide();

        var index;
        index = 0;
        var totalslides;
        totalslides = 2;

        var nextSlide = function () {
            $('#slideshow div').eq(index).fadeOut(1000);
            $('#nav' + index).toggleClass('navselected');
            index++;
            if (index > totalslides - 1) { index = 0; }
            $('#slideshow div').eq(index).fadeIn(3000);
            $('#nav' + index).toggleClass('navselected');
        }

    var nextSlideTimer = setInterval(nextSlide, 7000);

        function nav(selectedSlide) {
            clearInterval(nextSlideTimer);

            $('#slideshow div').eq(index).fadeOut(1000);
            $('#nav' + index).toggleClass('navselected');
            index = selectedSlide;
            $('#slideshow div').eq(index).fadeIn(1000);
            $('#nav' + index).toggleClass('navselected');

            nextSlideTimer = setInterval(nextSlide, 4000);
        }

        $("#nav0").click(function () { nav(0); });
        $("#nav1").click(function () { nav(1); });
    });



</script>

HTML

<style>
#slideshow { position: relative; width: 960px; height: 300px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow div { position: absolute; top: 10px ; left: 10px; right: 10px; bottom: 10px; }  
#slideshow a {display: block;width:960px;height:300px; }    
#slideshow a:hover{background-position: center bottom;}

#slideshownav a.navselected{color:#eb910c;}
#slideshownav {text-align:center; padding-top:8px;padding-bottom:20px;}
#slideshownav a {padding-right:10px;color:#748090;font-size:50px; text-decoration: none; }
#slideshownav a:hover {cursor:pointer;}
</style>

Answer 1

将此内容添加到文档就绪函数内部，靠近底部：

$('#slideshow').on('mouseover mouseleave', function( event ) {
  if ( event.type === 'mouseover') {
    // stop slideshow timer
    clearInterval(nextSlideTimer);
  } else {
    // add a shorter time delay
    nextSlideTimer = setInterval(nextSlide, 4000);
  }
});

Answer 2

您可以使用mouseover和mouseout：

$('#slideshow').mouseover(function () {
    // Clear the interval.
    clearInterval(nextSlideTimer);
}).mouseout(function () {
    // Start it nextSlide again.
    nextSlideTimer = setInterval(nextSlide, 3000);
});

或者更好，您可以使用mouseenter和mouseleave（请参阅jQuery docs for demo）：

$('#slideshow').mouseenter(function () {
    // Clear the interval.
    clearInterval(nextSlideTimer);
}).mouseleave(function () {
    // Start it nextSlide again.
    nextSlideTimer = setInterval(nextSlide, 3000);
});

第二种方法更好，因为当您移动父滑块的内部元素时，它不会触发很多事件。

向滑块添加暂停功能

2 个答案: