Question

我正在使用dev7studios精益滑块用于网站，我想知道是否有人可以帮助n00b修改以下javascript以使用实际的暂停/播放按钮而不是默认的“暂停悬停”功能。

if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){
    slider.hover(
        function () {
            clearTimeout(timer);
        },
        function () {
            doTimer();
        }
    );
}

提前致谢！

/*
 * Lean Slider v1.0.1
 * http://dev7studios.com/lean-slider
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

;(function($) {

    $.fn.leanSlider = function(options) {

        // Set up plugin vars
        var plugin = this,
            settings = {},
            slider = $(this),
            slides = slider.children(),
            currentSlide = 0,
            timer = 0;

        var init = function() {
            // Set up settings
            settings = $.extend({}, $.fn.leanSlider.defaults, options);

            // Add inital classes
            slider.addClass('lean-slider');
            slides.addClass('lean-slider-slide');

            currentSlide = settings.startSlide;
            if(settings.startSlide < 0 || settings.startSlide >= slides.length) currentSlide = 0;
            $(slides[currentSlide]).addClass('current');

            // Set up directionNav
            if(settings.directionNav && $(settings.directionNav).length){
                var prevNav = $('<a href="#" class="lean-slider-prev">'+ settings.prevText +'</a>'),
                    nextNav = $('<a href="#" class="lean-slider-next">'+ settings.nextText +'</a>');
                if(settings.directionNavPrevBuilder) prevNav = $(settings.directionNavPrevBuilder.call(this, settings.prevText));
                if(settings.directionNavNextBuilder) nextNav = $(settings.directionNavNextBuilder.call(this, settings.nextText));

                prevNav.on('click', function(e){
                    e.preventDefault();
                    plugin.prev();
                });
                nextNav.on('click', function(e){
                    e.preventDefault();
                    plugin.next();
                });

                $(settings.directionNav).append(prevNav);
                $(settings.directionNav).append(nextNav);
            }

            // Set up controlNav
            if(settings.controlNav && $(settings.controlNav).length){
                slides.each(function(i){
                    var controlNav = $('<a href="#" class="lean-slider-control-nav">'+ (i + 1) +'</a>');
                    if(settings.controlNavBuilder) controlNav = $(settings.controlNavBuilder.call(this, i, $(slides[i])));

                    controlNav.on('click', function(e){
                        e.preventDefault();
                        plugin.show(i);
                    });

                    $(settings.controlNav).append(controlNav);
                });
            }

            // Set up pauseOnHover
            if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){
                slider.hover(
                    function () {
                        clearTimeout(timer);
                    },
                    function () {
                        doTimer();
                    }
                );
            }

            // Initial processing
            updateControlNav();
            doTimer();

            // Trigger the afterLoad callback
            settings.afterLoad.call(this);

            return plugin;
        };

        // Process timer
        var doTimer = function(){
            if(settings.pauseTime && settings.pauseTime > 0){
                clearTimeout(timer);
                timer = setTimeout(function(){ plugin.next(); }, settings.pauseTime);
            }
        };

        // Update controlNav
        var updateControlNav = function(){
            if(settings.controlNav){
                $('.lean-slider-control-nav', settings.controlNav).removeClass('active');
                $($('.lean-slider-control-nav', settings.controlNav).get(currentSlide)).addClass('active');
            }
        };

        // Prev
        plugin.prev = function(){
            // Trigger the beforeChange callback
            settings.beforeChange.call(this, currentSlide);

            currentSlide--;
            if(currentSlide < 0) currentSlide = slides.length - 1;
            slides.removeClass('current');
            $(slides[currentSlide]).addClass('current');
            updateControlNav();
            doTimer();

            // Trigger the afterChange callback
            settings.afterChange.call(this, currentSlide);
        };

        // Next
        plugin.next = function(){
            // Trigger the beforeChange callback
            settings.beforeChange.call(this, currentSlide);

            currentSlide++;
            if(currentSlide >= slides.length) currentSlide = 0;
            slides.removeClass('current');
            $(slides[currentSlide]).addClass('current');
            updateControlNav();
            doTimer();

            // Trigger the afterChange callback
            settings.afterChange.call(this, currentSlide);
        };

        // Show
        plugin.show = function(index){
            // Trigger the beforeChange callback
            settings.beforeChange.call(this, currentSlide);

            currentSlide = index;
            if(currentSlide < 0) currentSlide = slides.length - 1;
            if(currentSlide >= slides.length) currentSlide = 0;
            slides.removeClass('current');
            $(slides[currentSlide]).addClass('current');
            updateControlNav();
            doTimer();

            // Trigger the afterChange callback
            settings.afterChange.call(this, currentSlide);
        };

        // Call constructor
        return init();
    };

    // Defaults
    $.fn.leanSlider.defaults = {
        pauseTime: 4000,
        pauseOnHover: true,
        startSlide: 0,
        directionNav: '',
        directionNavPrevBuilder: '',
        directionNavNextBuilder: '',
        controlNav: '',
        controlNavBuilder: '',
        prevText: 'Prev',
        nextText: 'Next',
        beforeChange: function(){},
        afterChange: function(){},
        afterLoad: function(){}
    };

})(jQuery);

Answer 1

这是一种方法。请尝试对您的图片，文件夹位置进行适当的调整，并将JS和CSS相应地放在您的页面中。

祝你好运！

var _animate  = '';
var active = 1;
function animate() {
    _animate = setInterval(function() { 
      $('#slider > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slider');
    },  3000);
}


$("#clickMe").bind(
    'click' , function() {
        if (active === 1) {
            clearInterval(_animate);
            active = 0;
        } else {
            animate();
            active = 1;
        
        }
    }
);
$("#slider > div:gt(0)").hide();
animate();

#slider { 
    margin: 50px auto; 
    position: relative; 
    width: 200px; 
    height: 200px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slider > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

<!DOCTYPE html>
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="lean-slider.js"></script>
<link rel="stylesheet" href="lean-slider.css" type="text/css" />
    
    </head>
<body>
<div id="slider">
    <div>
        <img src="a1.jpg" alt="" width="200px" height="200px"/>
    </div>
    <div >
        <img src="aaa1.jpg" alt="" width="200px" height="200px"/>
       
    </div>

</div>
     <input id="clickMe" type="button" value="clickme"  />


</body>
</html>

如何使用按钮而不是悬停来运行此JavaScript代码？

1 个答案: