jQuery循环代码可以像滚动条一样上下滚动

Posted 2021-02-24

This is some code that creates an effect for jQuery Cycle to scroll up when you click the down button and down when you click the up button - like a scrollbar.

$.fn.cycle.transitions.scrollUpOrDown = function ($cont, $slides, opts) {
	$cont.css('overflow', 'hidden');
	opts.before.push($.fn.cycle.commonReset);
	// custom transition fn (down for next, up for prev)
	opts.fxFn = function (curr, next, opts, cb, fwd) {
		var h = $cont.height();
		opts.cssFirst = {top: 0};
		opts.animIn = {	top: 0};
		opts.cssBefore = {top: ( fwd ) ? h : 0-h };
		opts.animOut = {top:( fwd ) ? 0 - h : 0+h};
		var $l = $(curr),$n = $(next);
		$n.css(opts.cssBefore);
		var fn = function () {
			$n.show();
			$n.animate(opts.animIn, opts.speedIn, opts.easeIn, cb);
		};
		$l.animate(opts.animOut, opts.speedOut, opts.easeOut, function () {
			if (opts.cssAfter) $l.css(opts.cssAfter);
			if (!opts.sync) fn();
		});
		if (opts.sync) fn();
	};
};