当与我的 ajax 内容加载器结合使用时，我的图像滑块不起作用，但单独的滑块确实起作用。当我在我的网站上尝试时，图像滑块仅在我刷新页面时才有效。任何想法为什么这些不一起工作？
$(document).ready(function() {
//menu loader
$('.n3').click(function() {
$('#secNav').toggle();
return false;
});
$('.n1 a, .n2 a, .n4 a').click(function() {
$('#secNav').hide();
});
//content loader in portfolio div
var hash = window.location.hash.substr(1);
var href = $('.n1 a, .n2 a, .n4 a, #secNav a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #portfolio';
$('#portfolio').load(toLoad)
}
});
$('.n1 a, .n2 a, .n4 a, #secNav a').click(function(){
var toLoad = $(this).attr('href')+' #portfolio';
$('#portfolio').fadeOut("fast",loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#portfolio').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#portfolio').fadeIn("1000");
}
return false;
});
//active link diff color
$("#nav a").click( function() {
$("#nav a").css("color", "#000");
$(this).css("color", "#85f1f5");
});
$("#secNav a").click( function() {
$("#secNav a").css("color", "#000");
$(this).css("color", "#ff2712");
});
$("#nav a").click( function() {
$("#secNav a").css("color", "#000");
});
//end of doc ready
});
//image slider
$(window).load(function(){
// We are listening to the window.load event, so we can be sure
// that the images in the slideshow are loaded properly.
// Testing whether the current browser supports the canvas element:
var supportCanvas = 'getContext' in document.createElement('canvas');
// The canvas manipulations of the images are CPU intensive,
// this is why we are using setTimeout to make them asynchronous
// and improve the responsiveness of the page.
var slides = $('#slideshow li'),
current = 0,
slideshow = {width:0,height:0};
setTimeout(function(){
window.console && window.console.time && console.time('Generated In');
if(supportCanvas){
$('#slideshow img').each(function(){
if(!slideshow.width){
// Taking the dimensions of the first image:
slideshow.width = this.width;
slideshow.height = this.height;
}
// Rendering the modified versions of the images:
createCanvasOverlay(this);
});
}
window.console && window.console.timeEnd && console.timeEnd('Generated In');
$('#slideshow .arrow').click(function(){
var li = slides.eq(current),
canvas = li.find('canvas'),
nextIndex = 0;
// Depending on whether this is the next or previous
// arrow, calculate the index of the next slide accordingly.
if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
var next = slides.eq(nextIndex);
if(supportCanvas){
// This browser supports canvas, fade it into view:
canvas.fadeIn(function(){
// Show the next slide below the current one:
next.show();
current = nextIndex;
// Fade the current slide out of view:
li.fadeOut(function(){
li.removeClass('slideActive');
canvas.hide();
next.addClass('slideActive');
});
});
}
else {
// This browser does not support canvas.
// Use the plain version of the slideshow.
current=nextIndex;
next.addClass('slideActive').show();
li.removeClass('slideActive').hide();
}
});
},100);
// This function takes an image and renders
// a version of it similar to the Overlay blending
// mode in Photoshop.
// **NOTE: REMOVED COLOR CHANGES
function createCanvasOverlay(image){
var canvas = document.createElement('canvas'),
canvasContext = canvas.getContext("2d");
// Make it the same size as the image
canvas.width = slideshow.width;
canvas.height = slideshow.height;
// Drawing the default version of the image on the canvas:
canvasContext.drawImage(image,0,0);
// Taking the image data and storing it in the imageData array:
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
data = imageData.data;
// Putting the modified imageData back to the canvas.
canvasContext.putImageData(imageData,0,0);
// Inserting the canvas in the DOM, before the image:
image.parentNode.insertBefore(canvas,image);
}
//end of window load
});