ファイルが最初に読み込まれるたびに、スクリプトが完全に読み込まれないように見えるという問題があります (キャッシュと Cookie をクリアした後)。ページを再度更新すると、スクリプトが適切に実行されます。これはキャッシュをクリアするたびに発生するため、基本的に最初の実行では読み込まれません。
Jquery が不要な問題を作成していないかどうかを確認する方法がわかりません。 http://jsfiddle.net/Lp6SX/1/
jQuery(document).ready(function ($) {
$(window).load(function () {
var fitem = 0;
var litem = 0;
var mitem = 0;
function mycarousel_initCallback(carousel) {
jQuery('.productbox').bind('click', function () {
clearInterval(pt);
clearInterval(nt);
$('#mycarousel-prevpause').hide();
$('#mycarousel-nextpause').hide();
$('#next').show();
$('#prev').show();
var clickedId = jQuery(this).parent().attr('jcarouselindex');
var totaldiff = 0;
console.log(clickedId + "==>" + mitem);
if (clickedId == mitem) {
var c_buy = jQuery(this).parent().attr('data-byitnow');
//alert("as"+c_buy);
window.open(c_buy, '_blank');
window.focus();
//window.open =c_buy;
}
if (clickedId > mitem) {
totaldiff = clickedId - mitem;
//console.log('clickedId '+totaldiff);
if (totaldiff > 0) {
carousel.stopAuto();
carousel.options.scroll = totaldiff;
carousel.next();
}
} else {
totaldiff = mitem - clickedId;
if (totaldiff > 0) {
carousel.stopAuto();
carousel.options.scroll = totaldiff;
carousel.prev();
}
}
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function () {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
jQuery('#mycarousel-next').bind('click', function () {
$('#mycarousel-prevpause').hide();
$('#mycarousel-nextpause').hide();
$('#next').show();
$('#prev').show();
clearInterval(pt);
clearInterval(nt);
carousel.stopAuto();
carousel.options.scroll = 5;
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function () {
$('#mycarousel-prevpause').hide();
$('#mycarousel-nextpause').hide();
$('#next').show();
$('#prev').show();
clearInterval(pt);
clearInterval(nt);
carousel.stopAuto();
carousel.options.scroll = 5;
carousel.prev();
return false;
});
jQuery('#mycarousel-prevpause').bind('click', function () {
clearInterval(pt);
clearInterval(nt);
$('#prev').show();
carousel.stopAuto();
$(this).hide();
$('#mycarousel-nextpause').hide();
return false;
});
jQuery('#mycarousel-nextpause').bind('click', function () {
clearInterval(pt);
clearInterval(nt);
$('#next').show();
carousel.stopAuto();
$(this).hide();
$('#mycarousel-prevpause').hide();
return false;
});
jQuery('#prev').bind('click', function () {
$('#mycarousel-prevpause').show();
$('#mycarousel-nextpause').hide();
$('#next').show();
carousel.stopAuto();
continue_prev(carousel);
$(this).hide();
return false;
});
jQuery('#next').bind('click', function () {
$('#mycarousel-nextpause').show();
$('#mycarousel-prevpause').hide();
$('#prev').show();
carousel.stopAuto();
continue_next(carousel);
$(this).hide();
return false;
});
};
var nt;
var pt;
function continue_next(carousel) {
clearInterval(pt);
nt = setInterval(function () {
carousel.options.scroll = 1;
carousel.prev();
}, 2000);
}
function continue_prev(carousel) {
clearInterval(nt);
pt = setInterval(function () {
carousel.options.scroll = 1;
carousel.next();
}, 2000);
}
function mycarousel_reloadCallback(carousel) {
//console.log('Carousel reloaded'+fitem+"==>"+litem);
makeCenterActive();
};
/**
* This is the callback function which receives notification
* when an item becomes the first one in the visible range.
*/
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
//console.log('Item #' + idx + ' is now the first item');
fitem = idx;
};
/**
* This is the callback function which receives notification
* when an item becomes the first one in the visible range.
*/
function mycarousel_itemLastInCallback(carousel, item, idx, state) {
//console.log('Item #' + idx + ' is now the last item');
litem = idx;
makeCenterActive(carousel);
};
function makeCenterActive(carousel) {
//console.log('Carousel reloaded'+fitem+"==>"+litem);
mitem = ((litem - fitem) / 2) + fitem;
var middleItemId = $('.jcarousel-item-' + mitem + '').attr('id');
//console.log('Middle Item'+mitem+"==>"+middleItemId);
$('.activeBox').each(function () {
//$(this).animate({height: "75px",width:"75px",marginTop:"0px"}, '200').removeClass('activeBox');
$(this).removeClass('activeBox');
//$(this).transition({ scale: 1 });
$(this).transition({
height: "109px",
width: "135px",
marginTop: "0px"
});
$(this).children().children('img').transition({
"max-width": "105px",
"max-height": "105px"
});
});
$('.jcarousel-item-' + mitem + '').each(function () {
//$(this).animate({height: "98px",width:"89px",marginTop:"-10px",marginLeft:"0px"}, '200').addClass('activeBox');
//$(this).animate({width: "89px !important", height: "105px !important"}, 'slow');
$(this).addClass('activeBox');
//$(this).transition({ scale: 1.3 });
$(this).transition({
height: "140px",
width: "140px",
marginTop: "-17px",
marginLeft: "0px"
});
$(this).children().children('img').transition({
"max-width": "105px",
"max-height": "105px"
});
});
var c_time = $('#' + middleItemId + '').attr('data-timeremain');
var c_buy = $('#' + middleItemId + '').attr('data-byitnow');
var c_price = $('#' + middleItemId + '').attr('data-price');
$('#timeremain').html('Current' + c_time);
$('#byitnow').html('<a href="' + c_buy + '">Price :</a>');
$('#price').html(c_price);
//carousel.reload();
}
// Ride the carousel...
jQuery(document).ready(function () {
jQuery("#mycarousel").jcarousel({
scroll: 1,
auto: 1,
wrap: 'circular',
initCallback: mycarousel_initCallback,
reloadCallback: mycarousel_reloadCallback,
itemFirstInCallback: mycarousel_itemFirstInCallback,
itemLastInCallback: mycarousel_itemLastInCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
})
});
カルーセル スライダーを変更するためのものです。誰でもコードをチェックして、問題があるかどうかを確認できますか?
御時間ありがとうございます。