1
私はカルーセルのjQueryプラグインを作成していますが、左右のボタンが数秒後にしか機能しない理由を理解できません...すぐに1つをクリックしようとすると、フェード効果には望ましくない遅れがありますが、最初に少し待ってからクリックすると、すぐにフェードします。私は間隔を取り除こうとしましたが、それは助けになりませんでした。以下のコードスニペットを実行して、私の言いたいことを確認してください。本当に奇妙なのは、エフェクトを「フェード」から「スプリット」に変更すると、ボタンをクリックするとすぐにエフェクトが発生するということです。jQuery Carousel Pluginボタンの遅延の問題
(function ($) {
/* jSlide */
$.fn.jSlide = function(options) {
var settings = $.extend({
buttons: true,
speed: 3000,
effect: "slide",
sizing: "auto",
fadeSpeed: 1000
}, options);
//Main wrapper
var styles = {
'position': 'relative',
'overflow': 'hidden'
};
$(this).css(styles);
//Anchors & Sizing
this.children().each(function() {
//Sizing
if (settings.sizing == "auto") {
var styles = {
'position': 'absolute',
'width': 'auto',
'height': 'auto',
'min-width': '100%',
'min-height': '100%'
}
$(this).css(styles);
} else if (settings.sizing == "fullWidth") {
var styles = {
'position': 'absolute',
'width': '100%',
'height': 'auto'
}
if (settings.effect == "split") {
styles.width = '200%';
}
$(this).css(styles);
} else if (settings.sizing == "fullHeight") {
var styles = {
'position': 'absolute',
'width': 'auto',
'height': '100%',
}
$(this).css(styles);
}
//Anchors
if (settings.effect == "split") {
$(this).wrap('<div class="j-slide-wrapper"></div>').wrap('<div class="j-split-anchor"></div>');
$(this).clone().appendTo($(this).closest('.j-slide-wrapper')).wrap('<div class="j-split-anchor"></div>');
} else {
$(this).wrap('<div class="j-slide-wrapper"></div>');
}
var length = $('.j-slide-wrapper').length;
$('.j-slide-wrapper').each(function (index) {
$(this).css('z-index', length - index)
}).promise().done(function() {
$('.j-slide-wrapper').each(function() {
$(this).animate({
'opacity': 1
}, 1000)
});
});
});
\t //Buttons
if (settings.buttons) {
this.prepend(
'<button id="j-slide-left-btn" class="j-slide-btn styled-button"></button>' +
'<button id="j-slide-right-btn" class="j-slide-btn styled-button"></button>'
)
}
var length = $('.j-slide-wrapper').length;
$('.j-slide-btn').css('z-index', length + 1);
//Effect
var i = 0,
wrapper = $(this).find('.j-slide-wrapper');
timer = setInterval(function() {
var length = wrapper.length;
if (settings.effect == "fade") {
fadeSlides(i, wrapper, length, 'right', settings.fadeSpeed);
} else if (settings.effect == "split") {
splitSlides(i, wrapper, length, 'right');
}
if (i + 1 == length) {
i = 0;
} else {
i = i + 1;
}
}, settings.speed);
\t
\t $('#j-slide-left-btn').click(function() {
\t \t clearInterval(timer);
var length = wrapper.length;
if (settings.effect == "fade") {
fadeSlides(i, wrapper, length, 'left', settings.fadeSpeed);
} else if (settings.effect == "split") {
splitSlides(i, wrapper, length, 'left');
}
if (i - 1 < 0) {
i = length - 1;
} else {
i = i - 1;
}
\t });
\t $('#j-slide-right-btn').click(function() {
\t \t clearInterval(timer);
var length = wrapper.length;
if (settings.effect == "fade") {
fadeSlides(i, wrapper, length, 'right', settings.fadeSpeed);
} else if (settings.effect == "split") {
splitSlides(i, wrapper, length, 'right');
}
if (i + 1 == length) {
i = 0;
} else {
i = i + 1;
}
\t });
function fadeSlides (i, wrapper, length, dir, speed) {
wrapper.eq(i).css('z-index', 3);
wrapper.filter(':gt(' + i + ')').css('z-index', 1);
wrapper.filter(':lt(' + i + ')').css('z-index', 1);
if (dir == 'right') {
\t \t \t if (i + 1 == length) {
wrapper.eq(0).css('z-index', 2);
\t \t \t \t wrapper.eq(0).fadeTo(1, 1);
\t \t \t } else {
wrapper.eq(i + 1).css('z-index', 2);
\t \t \t \t wrapper.eq(i + 1).fadeTo(1, 1);
\t \t \t }
\t \t } else {
if (i - 1 < 0) {
wrapper.eq(length - 1).css('z-index', 2);
wrapper.eq(length - 1).fadeTo(1, 1)
} else {
wrapper.eq(i - 1).css('z-index', 2);
wrapper.eq(i - 1).fadeTo(1, 1)
}
}
wrapper.eq(i).fadeTo(speed, 0, function() {
$(this).css('z-index', 1);
});
}
function splitSlides (i, wrapper, length, dir) {
wrapper.eq(i).css('z-index', 2);
\t \t
\t \t if (dir == 'right') {
\t \t \t if (i + 1 == length) {
\t \t \t \t wrapper.eq(0).css('z-index', 1);
\t \t \t \t wrapper.eq(0).find('.j-split-anchor').each(function() {
\t \t \t \t \t $(this).animate({
\t \t \t \t \t \t left: 0
\t \t \t \t \t }, 0);
\t \t \t \t });
\t \t \t } else {
\t \t \t \t wrapper.eq(i + 1).css('z-index', 1);
\t \t \t \t wrapper.eq(i + 1).find('.j-split-anchor').each(function() {
\t \t \t \t \t $(this).animate({
\t \t \t \t \t \t left: 0
\t \t \t \t \t }, 0);
\t \t \t \t });
\t \t \t }
\t \t } else {
\t \t \t if (i - 1 < 0) {
\t \t \t \t wrapper.eq(length - 1).css('z-index', 1);
\t \t \t \t wrapper.eq(length - 1).find('.j-split-anchor').each(function() {
\t \t \t \t \t $(this).animate({
\t \t \t \t \t \t left: 0
\t \t \t \t \t }, 0);
\t \t \t \t });
\t \t \t } else {
\t \t \t \t wrapper.eq(i - 1).css('z-index', 1);
\t \t \t \t wrapper.eq(i - 1).find('.j-split-anchor').each(function() {
\t \t \t \t \t $(this).animate({
\t \t \t \t \t \t left: 0
\t \t \t \t \t }, 0);
\t \t \t \t });
\t \t \t }
\t \t }
\t \t
\t \t wrapper.eq(i).find('.j-split-anchor:first-child').animate({
\t \t \t 'left': '-100%'
\t \t }, 750);
\t \t wrapper.eq(i).find('.j-split-anchor:last-child').animate({
\t \t \t 'left': '100%'
\t \t }, 750);
}
return this;
}
} (jQuery));
$(window).on("load", function() {
$('#split-images').jSlide({
effect: "fade",
sizing: "auto",
speed: 3000,
});
});body, html{
height: 100%;
width: 100%;
overflow-x: hidden;
padding: 0;
margin: 0;
}
#split-images{
display: block;
width: 100%;
height: 100%;
}
.j-slide-wrapper{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
/* .j-slide-wrapper::before{
display: table;
table-layout: fixed;
content: "";
}
.j-slide-wrapper::after{
display: table;
table-layout: fixed;
content: "";
clear: both;
} */
.j-split-anchor {
width: 50%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.j-slide-wrapper:nth-of-type(n + 2) .j-split-anchor:first-child{
left: -100%;
}
.j-slide-wrapper:nth-of-type(n + 2) .j-split-anchor:last-child{
left: 100%;
}
.j-split-anchor:first-child img{
right: 0;
-ms-transform: translateX(50%);
-moz-transform: translateX(50%);
-o-transform: translateX(50%);
-webkit-transform:translateX(50%);
transform: translateX(50%);
}
.j-split-anchor:last-child img{
left: 0;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform:translateX(-50%);
transform: translateX(-50%);
}
/* ************************************** BUTTONS ************************** */
.j-slide-btn{
position: absolute;
height: 25px;
width: 25px;
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform:translateY(-50%);
transform: translateY(-50%);
z-index: 3;
opacity: 0.7;
}
#j-slide-left-btn{
background: #3f3a3e url(../images/arrow-left-light.png) center center no-repeat;
left: 2%; \t
}
#j-slide-right-btn{
background: #3f3a3e url(../images/arrow-right-light.png) center center no-repeat;
right: 2%; \t
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="split-images">
<img src="https://pixabay.com/static/uploads/photo/2015/03/25/06/48/love-688582_960_720.jpg" alt= "" />
<img src="https://prod01-cdn04.cdn.firstlook.org/wp-uploads/sites/1/2016/04/GoogleWH-lead-FIN-article-header.jpg" alt= "" />
<img src="https://lh4.googleusercontent.com/KRvgImt_ugjuflC9uMurL5Dln3PTeofLN9xQtHESNs_ehRbFDezNrD9IkBYmzPqFeZ6tFb_lG08=s640-h400-e365" alt= "" />
</div>
ここでわかるように、このスニペットでは...前のボタンまたは次のボタンの最初のクリックは、より長いフェード遅延を持っています...これ以外は...働くように見えます。 –
これはまったく遅延がないはずです。残りのクリックのようにすぐにフェードアウトするはずです。 –