Исправлена!Не могу поверить, что раньше этого не видел:
$('#s4')
.before('<div id="nav">')
.cycle({
fx: 'shuffle',
speed: 500,
shuffle: { top:15, left: 300 },
timeout: 0,
pager: '#nav',
cleartypeNoBg:true
});
Здесь вы можете выбрать анимацию воспроизведения в случайном порядке.У меня установлен верхний уровень: 15 и слева: 300
Я пытаюсь использовать Cycle Plugin, но мне нужно, чтобы он перемещался вправо, а не влево.Я сделал это успешно, изменив
opts.shuffle = opts.shuffle || {left:-w, top:15};
на
opts.shuffle = opts.shuffle || {left:+w, top:15};
Единственная проблема заключается в том, что изображение, которое я перетасовываю, является очень большим и создает горизонтальную полосу прокрутки во времяпереход между изображениями.Этого не происходит, когда он тасуется влево, и я не уверен, что мне не хватает.Ниже приведен фрагмент для эффекта перетасовки.Любая помощь приветствуется!
// shuffle
$.fn.cycle.transitions.shuffle = function($cont, $slides, opts) {
var i, w = $cont.css('overflow', 'visible').width();
$slides.css({left: 0, top: 0});
opts.before.push(function(curr,next,opts) {
$.fn.cycle.commonReset(curr,next,opts,true,true,true);
});
// only adjust speed once!
if (!opts.speedAdjusted) {
opts.speed = opts.speed / 2; // shuffle has 2 transitions
opts.speedAdjusted = true;
}
opts.random = 0;
opts.shuffle = opts.shuffle || {left:+w, top:15};
opts.els = [];
for (i=0; i < $slides.length; i++)
opts.els.push($slides[i]);
for (i=0; i < opts.currSlide; i++)
opts.els.push(opts.els.shift());
// custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
opts.fxFn = function(curr, next, opts, cb, fwd) {
var $el = fwd ? $(curr) : $(next);
$(next).css(opts.cssBefore);
var count = opts.slideCount;
$el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() {
var hops = $.fn.cycle.hopsFromLast(opts, fwd);
for (var k=0; k < hops; k++)
fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop());
if (fwd) {
for (var i=0, len=opts.els.length; i < len; i++)
$(opts.els[i]).css('z-index', len-i+count);
}
else {
var z = $(curr).css('z-index');
$el.css('z-index', parseInt(z)+1+count);
}
$el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() {
$(fwd ? this : curr).hide();
if (cb) cb();
});
});
};
opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
};
HTML
<div id="contentAreaJS" class="contentArea">
<div id="s4" class="pics">
<div id="navlist">
<ul>
<li id="mon"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_fajitas.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
<li id="tue"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_tacos.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
<li id="wed"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_chips.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
<li id="thur"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_dessert.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
<li id="fri"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_burger.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
</ul>
</div>
<a href="https://www.chilistogo.com/Pages/Welcome.aspx" target="_blank"><img src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilispartyPlatters.png" height="237" width="769" /></a>
<a href="http://www.chilis.com/EN/HappyHours/001.005.0609.pdf" target="_blank"><img src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilishappyHour.png" height="237" width="769" /></a>
</div>
</div>