Question

我在网页开发中使用超级简单的滑块插件。版本https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js正常运行。

但我想替换这个新版本：https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js。

如果用这个新版本的jquery替换滑块不能正常工作。所以，任何人都可以帮助我更好。

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    .sss {
        height: 0;
        margin: 0; 
        padding: 0;
        position: relative;
        display: block;
        overflow: hidden;
    }

    .ssslide {
        width: 100%;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        overflow: hidden;
    }

    .ssslide img {
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        position: relative;
        display: block;
    }

    .sssnext, .sssprev {
        width: 25px;
        height: 100%;
        margin: 0;
        position: absolute;
        top: 0;
        background: url('images/arr.png') no-repeat;
    }

    .sssprev {
        left: 3%;
        background-position: 0 50%;
    }

    .sssnext {
        right: 3%;
        background-position: -26px 50%;
    }

    .sssprev:hover, .sssnext:hover {
        cursor: pointer;
    }
    .slider {width: 600px; height:400px; margin:30px auto;}
    </style>
/*this version is working fine*/
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
 /*this version is not working*/   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>

    ;(function($, window, document, undefined ) {

    $.fn.sss = function(options) {

    // Options

        var settings = $.extend({
        slideShow : true,
        startOn : 0,
        speed : 3500,
        transition : 400,
        arrows : true
        }, options);

        return this.each(function() {

    // Variables

        var
        wrapper = $(this),
        slides = wrapper.children().wrapAll('<div class="sss"/>').addClass('ssslide'),
        slider = wrapper.find('.sss'),
        slide_count = slides.length,
        transition = settings.transition,
        starting_slide = settings.startOn,
        target = starting_slide > slide_count - 1 ? 0 : starting_slide,
        animating = false,
        clicked,
        timer,
        key,
        prev,
        next,

    // Reset Slideshow

        reset_timer = settings.slideShow ? function() {
        clearTimeout(timer);
        timer = setTimeout(next_slide, settings.speed);
        } : $.noop;

    // Animate Slider

        function get_height(target) {
        return ((slides.eq(target).height() / slider.width()) * 100) + '%';
        }

        function animate_slide(target) {
        if (!animating) {
        animating = true;
        var target_slide = slides.eq(target);

        target_slide.fadeIn(transition);
        slides.not(target_slide).fadeOut(transition);

        slider.animate({paddingBottom: get_height(target)}, transition,  function() {
        animating = false;
        });

        reset_timer();

        }};

    // Next Slide

        function next_slide() {
        target = target === slide_count - 1 ? 0 : target + 1;
        animate_slide(target);
        }

    // Prev Slide

        function prev_slide() {
        target = target === 0 ? slide_count - 1 : target - 1;
        animate_slide(target);
        }

        if (settings.arrows) {
        slider.append('<div class="sssprev"/>', '<div class="sssnext"/>');
        }

        next = slider.find('.sssnext'),
        prev = slider.find('.sssprev');

        $(window).load(function() {

        slider.css({paddingBottom: get_height(target)}).click(function(e) {
        clicked = $(e.target);
        if (clicked.is(next)) { next_slide() }
        else if (clicked.is(prev)) { prev_slide() }
        });

        animate_slide(target);

        $(document).keydown(function(e) {
        key = e.keyCode;
        if (key === 39) { next_slide() }
        else if (key === 37) { prev_slide() }
        });

        });
    // End

    });

    };
    })(jQuery, window, document);
    </script>
    <script>
    jQuery(function($) {
    $('.slider').sss();
    });
    </script>
    </head>

    <body>
    <div class="slider">
    <img src="https://yaseennikah.com/Images/Pics1.jpg" />
    <img src="https://yaseennikah.com/Images/Pics2.jpg" />
    <img src="https://yaseennikah.com/Images/Pics3.jpg" />
    </div>
    </body>
    </html>

超级简单滑块无法使用最新的jquery API版本3.2.1

0 个答案: