如何停止和重置slides.jquery.js
编辑7月4日：仍然在努力解决这个问题。 我确信所需要的只是一个基于类“播放”停止幻灯片放映的function，但不确定如何创建该function。
我在一个有多个幻灯片的单页网站上使用slides.js 。 我最初使用以下内容在头部初始化了脚本：
$(function(){ $(".slides").slides({ play: 3000, fadeSpeed: 800, effect: 'fade' }); 但我发现多个幻灯片表现得很奇怪，所以我决定让它们单独播放并在另一个函数（控制网站内容）中初始化，如下所示：
activeID = this.id, function playSlides() { $('.slides#' + activeID + '-slides').addClass('playing').slides({ play: 3000, fadeSpeed: 800, effect: 'fade' }); }
这是在每次幻灯片放映时第一次正常工作，但在此之后第二次观看幻灯片放映时，幻灯片放映中的图像似乎消失，并且分页数字的两倍出现。
我确定问题是幻灯片需要在每次播放时停止并重置。
那么我该如何停止正在播放的幻灯片？ 我试着调用以下函数：
function stopSlides() { if($('.slides.playing')) { stop(); $('.slides.playing').removeClass('playing'); } }
我也尝试过：
function stopSlides() { if($('.slides').hasClass('playing')) { stop(); $('.slides.playing').removeClass('playing'); } }
但是，这似乎做了什么。 如果我不够清楚或需要更多信息，请告知。 MTIA！
脚本在这里：
/* * Slides, A Slideshow Plugin for jQuery * Intructions: http://slidesjs.com * By: Nathan Searles, http://nathansearles.com * Version: 1.1.8 * Updated: June 1st, 2011 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ (function($){ $.fn.slides = function( option ) { // override defaults with specified option option = $.extend( {}, $.fn.slides.option, option ); return this.each(function(){ // wrap slides in control container, make sure slides are block level $('.' + option.container, $(this)).children().wrapAll(''); var elem = $(this), control = $('.slides_control',elem), total = control.children().size(), width = control.children().outerWidth(), height = control.children().outerHeight(), start = option.start - 1, effect = option.effect.indexOf(',') < 0 ? option.effect : option.effect.replace(' ', '').split(',')[0], paginationEffect = option.effect.indexOf(',') prev) { position = width*2; direction = -width*2; } else { // if next is less then previous set position of next slide to left of previous position = 0; direction = 0; } // store new current slide current = next; break; } // fade animation if (effect === 'fade') { // fade animation with crossfade if (option.crossfade) { // put hidden next above current control.children(':eq('+ next +')', elem).css({ zIndex: 10 // fade in next }).fadeIn(option.fadeSpeed, option.fadeEasing, function(){ if (option.autoHeight) { // animate container to height of next control.animate({ height: control.children(':eq('+ next +')', elem).outerHeight() }, option.autoHeightSpeed, function(){ // hide previous control.children(':eq('+ prev +')', elem).css({ display: 'none', zIndex: 0 }); // reset z index control.children(':eq('+ next +')', elem).css({ zIndex: 0 }); // end of animation option.animationComplete(next + 1); active = false; }); } else { // hide previous control.children(':eq('+ prev +')', elem).css({ display: 'none', zIndex: 0 }); // reset zindex control.children(':eq('+ next +')', elem).css({ zIndex: 0 }); // end of animation option.animationComplete(next + 1); active = false; } }); } else { // fade animation with no crossfade control.children(':eq('+ prev +')', elem).fadeOut(option.fadeSpeed, option.fadeEasing, function(){ // animate to new height if (option.autoHeight) { control.animate({ // animate container to height of next height: control.children(':eq('+ next +')', elem).outerHeight() }, option.autoHeightSpeed, // fade in next slide function(){ control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing); }); } else { // if fixed height control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing, function(){ // fix font rendering in ie, lame if($.browser.msie) { $(this).get(0).style.removeAttribute('filter'); } }); } // end of animation option.animationComplete(next + 1); active = false; }); } // slide animation } else { // move next slide to right of previous control.children(':eq('+ next +')').css({ left: position, display: 'block' }); // animate to new height if (option.autoHeight) { control.animate({ left: direction, height: control.children(':eq('+ next +')').outerHeight() },option.slideSpeed, option.slideEasing, function(){ control.css({ left: -width }); control.children(':eq('+ next +')').css({ left: width, zIndex: 5 }); // reset previous slide control.children(':eq('+ prev +')').css({ left: width, display: 'none', zIndex: 0 }); // end of animation option.animationComplete(next + 1); active = false; }); // if fixed height } else { // animate control control.animate({ left: direction },option.slideSpeed, option.slideEasing, function(){ // after animation reset control position control.css({ left: -width }); // reset and show next control.children(':eq('+ next +')').css({ left: width, zIndex: 5 }); // reset previous slide control.children(':eq('+ prev +')').css({ left: width, display: 'none', zIndex: 0 }); // end of animation option.animationComplete(next + 1); active = false; }); } } // set current state for pagination if (option.pagination) { // remove current class from all $('.'+ option.paginationClass +' li.' + option.currentClass, elem).removeClass(option.currentClass); // add current class to next $('.' + option.paginationClass + ' li:eq('+ next +')', elem).addClass(option.currentClass); } } } // end animate function function stop() { // clear interval from stored id clearInterval(elem.data('interval')); } function pause() { if (option.pause) { // clear timeout and interval clearTimeout(elem.data('pause')); clearInterval(elem.data('interval')); // pause slide show for option.pause amount pauseTimeout = setTimeout(function() { // clear pause timeout clearTimeout(elem.data('pause')); // start play interval after pause playInterval = setInterval( function(){ animate("next", effect); },option.play); // store play interval elem.data('interval',playInterval); },option.pause); // store pause interval elem.data('pause',pauseTimeout); } else { // if no pause, just stop stop(); } } // 2 or more slides required if (total < 2) { return; } // error corection for start slide if (start total) { start = total - 1; } // change current based on start option number if (option.start) { current = start; } // randomizes slide order if (option.randomize) { control.randomize(); } // make sure overflow is hidden, width is set $('.' + option.container, elem).css({ overflow: 'hidden', // fix for ie position: 'relative' }); // set css for slides control.children().css({ position: 'absolute', top: 0, left: control.children().outerWidth(), zIndex: 0, display: 'none' }); // set css for control div control.css({ position: 'relative', // size of control 3 x slide width width: (width * 3), // set height to slide height height: height, // center control to slide left: -width }); // show slides $('.' + option.container, elem).css({ display: 'block' }); // if autoHeight true, get and set height of first slide if (option.autoHeight) { control.children().css({ height: 'auto' }); control.animate({ height: control.children(':eq('+ start +')').outerHeight() },option.autoHeightSpeed); } // checks if image is loaded if (option.preload && control.find('img:eq(' + start + ')').length) { // adds preload image $('.' + option.container, elem).css({ background: 'url(' + option.preloadImage + ') no-repeat 50% 50%' }); // gets image src, with cache buster var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime(); // check if the image has a parent if ($('img', elem).parent().attr('class') != 'slides_control') { // If image has parent, get tag name imageParent = control.children(':eq(0)')[0].tagName.toLowerCase(); } else { // Image doesn't have parent, use image tag name imageParent = control.find('img:eq(' + start + ')'); } // checks if image is loaded control.find('img:eq(' + start + ')').attr('src', img).load(function() { // once image is fully loaded, fade in control.find(imageParent + ':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){ $(this).css({ zIndex: 5 }); // removes preload image $('.' + option.container, elem).css({ background: '' }); // let the script know everything is loaded loaded = true; // call the loaded funciton option.slidesLoaded(); }); }); } else { // if no preloader fade in start slide control.children(':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){ // let the script know everything is loaded loaded = true; // call the loaded funciton option.slidesLoaded(); }); } // click slide for next if (option.bigTarget) { // set cursor to pointer control.children().css({ cursor: 'pointer' }); // click handler control.children().click(function(){ // animate to next on slide click animate('next', effect); return false; }); } // pause on mouseover if (option.hoverPause && option.play) { control.bind('mouseover',function(){ // on mouse over stop stop(); }); control.bind('mouseleave',function(){ // on mouse leave start pause timeout pause(); }); } // generate next/prev buttons if (option.generateNextPrev) { $('.' + option.container, elem).after('Prev'); $('.' + option.prev, elem).after('Next'); } // next button $('.' + option.next ,elem).click(function(e){ e.preventDefault(); if (option.play) { pause(); } animate('next', effect); }); // previous button $('.' + option.prev, elem).click(function(e){ e.preventDefault(); if (option.play) { pause(); } animate('prev', effect); }); // generate pagination if (option.generatePagination) { // create unordered list if (option.prependPagination) { elem.prepend('
'); } else { elem.append('
'); } // for each slide create a list item and link control.children().each(function(){ $('.' + option.paginationClass, elem).append(''+ (number+1) +' '); number++; }); } else { // if pagination exists, add href w/ value of item number to links $('.' + option.paginationClass + ' li a', elem).each(function(){ $(this).attr('href', '#' + number); number++; }); } // add current class to start slide pagination $('.' + option.paginationClass + ' li:eq('+ start +')', elem).addClass(option.currentClass); // click handling $('.' + option.paginationClass + ' li a', elem ).click(function(){ // pause slideshow if (option.play) { pause(); } // get clicked, pass to animate function clicked = $(this).attr('href').match('[^#/]+$'); // if current slide equals clicked, don't do anything if (current != clicked) { animate('pagination', paginationEffect, clicked); } return false; }); // click handling $('a.link', elem).click(function(){ // pause slideshow if (option.play) { pause(); } // get clicked, pass to animate function clicked = $(this).attr('href').match('[^#/]+$') - 1; // if current slide equals clicked, don't do anything if (current != clicked) { animate('pagination', paginationEffect, clicked); } return false; }); if (option.play) { // set interval playInterval = setInterval(function() { animate('next', effect); }, option.play); // store interval id elem.data('interval',playInterval); } }); }; // default options $.fn.slides.option = { preload: false, // boolean, Set true to preload images in an image based slideshow preloadImage: '/img/loading.gif', // string, Name and location of loading image for preloader. Default is "/img/loading.gif" container: 'slides_container', // string, Class name for slides container. Default is "slides_container" generateNextPrev: false, // boolean, Auto generate next/prev buttons next: 'next', // string, Class name for next button prev: 'prev', // string, Class name for previous button pagination: true, // boolean, If you're not using pagination you can set to false, but don't have to generatePagination: true, // boolean, Auto generate pagination prependPagination: false, // boolean, prepend pagination paginationClass: 'pagination', // string, Class name for pagination currentClass: 'current', // string, Class name for current class fadeSpeed: 350, // number, Set the speed of the fading animation in milliseconds fadeEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/ slideSpeed: 350, // number, Set the speed of the sliding animation in milliseconds slideEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/ start: 1, // number, Set the speed of the sliding animation in milliseconds effect: 'slide', // string, '[next/prev], [pagination]', eg 'slide, fade' or simply 'fade' for both crossfade: false, // boolean, Crossfade images in a image based slideshow randomize: false, // boolean, Set to true to randomize slides play: 0, // number, Autoplay slideshow, a positive number will set to true and be the time between slide animation in milliseconds pause: 0, // number, Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in milliseconds hoverPause: false, // boolean, Set to true and hovering over slideshow will pause it autoHeight: false, // boolean, Set to true to auto adjust height autoHeightSpeed: 350, // number, Set auto height animation time in milliseconds bigTarget: false, // boolean, Set to true and the whole slide will link to next slide on click animationStart: function(){}, // Function called at the start of animation animationComplete: function(){}, // Function called at the completion of animation slidesLoaded: function() {} // Function is called when slides is fully loaded }; // Randomize slide order on load $.fn.randomize = function(callback) { function randomizeOrder() { return(Math.round(Math.random())-0.5); } return($(this).each(function() { var $this = $(this); var $children = $this.children(); var childCount = $children.length; if (childCount > 1) { $children.hide(); var indices = []; for (i=0;i<childCount;i++) { indices[indices.length] = i; } indices = indices.sort(randomizeOrder); $.each(indices,function(j,k) { var $child = $children.eq(k); var $clone = $child.clone(true); $clone.show().appendTo($this); if (callback !== undefined) { callback($child, $clone); } $child.remove(); }); } })); }; })(jQuery);
我不知道这是不是最好的解决方案，但我找到了一个 – 不管怎样我的目的。 我也在使用Slides.js插件，客户端要求在最后一张幻灯片上停止滑动。 所以我使用了animationComplete回调函数来触发分页上的click事件（这会停止自动播放function）。
$("#slides").slides({ crossfade: false, effect: 'fade', fadeEasing: "easeOutQuad", fadeSpeed: 500, play: 6000, animationComplete: function(){ introSlides(); if($('.pagination li:last').hasClass('current')){ $('.pagination li:last a').trigger('click'); } } });
希望这有助于某人:)
最后使用Nathan Searle的Slidejs 2让这个工作得非常好。 有关更多详细信息，请参阅此Stackoverflow问题 。
Mike Cummings的回答非常有帮助。 但是，我使用了滑块的pause（）函数，而不是Click事件。 所以我的代码看起来像这样：
$("#slides").slides({ crossfade: false, effect: 'fade', fadeEasing: "easeOutQuad", fadeSpeed: 500, play: 6000, animationComplete: function() { if ($('.pagination li:last').hasClass('current')) { pause(); } } });
我遇到了同样的问题但是根据我的需要，幻灯片2.0的测试版本相当不可用，你可以控制状态（暂停，停止，播放），但其余代码仍处于alfa阶段我会说;）
需要几行代码来完成幻灯片1.9
在slidesjs论坛上查看这篇文章
干杯
达里奥
我认为下面的代码可能会有帮助，
此代码用于停止滑块
$( ".slides.playing" ).bind( "slidestop", function(event, ui) { ... });
然后你可以从下面的代码开始。
$( ".slides.playing" ).bind( "slidestart", function(event, ui) { ... });
谢谢。