我使用的滑块就是这个：http://www.stunicholls.com/gallery/jquery-slide-anything.html
它在正常的html上工作正常，但是当我把它加载到ajax加载的内容上时它不再起作用了，我该如何解决？
这是滑块的js：
$(window).load(function(){
/* just one variable to set-up */
speed = 600;
tabColor = '#069';
tabCurrent = '#09c';
/* setting the initial state of the slideshow and first image */
var picVar = $('.iStu12 li.images div.slide div.slidePanel');
totPic = picVar.length;
curPicWidth = picVar.eq(0).width();
curPicHeight = 480;
totWidth = 0;
/* calculate the total width of the images and set the div.slide to match */
$.each((picVar), function() {
caption=$(this).attr('caption');
$('.iStu12 li.caption').append('<b>'+caption+'</b>');
totWidth = totWidth+$(this).width();
});
$('ul.iStu12 li.images div.slide').width(totWidth);
current=0;
var captionVar = $('.iStu12 li.caption b');
tabSet ()
/* resize the containing elements, left/right arrow positions and add the first image caption */
resize(curPicWidth,curPicHeight)
/* monitor 'next' clicks */
$('.iStu12 li.next').click (function() {
picVar = $('.iStu12 li.images div.slide div.slidePanel');
/* animate the line of images left one photo - then remove the first image from set, make it the last image then finally move the set to absolute position left:0 */
curPicWidth = picVar.eq(0).width();
curPicHeight = 480;
$('ul.iStu12 li.images div.slide').animate({left:-curPicWidth}, speed,
function() {
$('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
$('ul.iStu12 li.images div.slide').css('left','0px');
});
/* get the width, height and alt for the currently displayed image */
curPicWidth = picVar.eq(1).width();
curPicHeight = 480;
/* animate the containing elements and left/right arrow positions to match the current image */
resize(curPicWidth,curPicHeight)
current++
if(current==totPic) {current=0;}
tabSet ()
});
/* monitor 'previous' clicks */
$('.iStu12 li.prev').click (function() {
/* get the last image from the set and make it the fist image, then set the left position of the set to minus the width of the new first image */
$('ul.iStu12 li.images div.slide').find('div.slidePanel:last').remove().prependTo('ul.iStu12 li.images div.slide');
picVar = $('.iStu12 li.images div.slide div.slidePanel');
curPicWidth = picVar.eq(0).width();
curPicHeight = 480;
$('ul.iStu12 li.images div.slide').css('left',-curPicWidth);
/* animate the first image to left = 0 */
$('ul.iStu12 li.images div.slide').animate({left:0}, speed);
/* animate the containing elements, left/right arrow positions to match the current image and change the caption */
resize(curPicWidth,curPicHeight)
current--
if(current==-1) {current=totPic-1;}
tabSet ()
});
/* tab clicking routine */
$('.iStu12 li.caption b').click (function() {
clicked = $(this).index()
/* if to the right of the current tab then slide left */
if (clicked>current) {
rotate=clicked-current;
picVar = $('.iStu12 li.images div.slide div.slidePanel');
curPicWidth = 0;
for (var i=0; i<rotate; i++) {
curPicWidth = curPicWidth+picVar.eq(i).width();
}
$('ul.iStu12 li.images div.slide').animate({left:-curPicWidth},{queue:false, duration:speed,
complete: function() {
for (var n=0; n<rotate; n++) {
$('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
$('ul.iStu12 li.images div.slide').css('left','0px');
}}
});
/* get the width, height and alt for the currently displayed image */
curPicWidth = picVar.eq(rotate).width();
curPicHeight = picVar.eq(rotate).height();
/* animate the containing elements and left/right arrow positions to match the current image */
resize(curPicWidth,curPicHeight)
current=clicked;
tabSet ()
}
/* if to the left of the current tab then slide right */
if (clicked<current) {
rotate=current-clicked;
picVar = $('.iStu12 li.images div.slide div.slidePanel');
curPicWidth = 0;
for (var i=0; i<rotate; i++) {
curPicWidth = curPicWidth+picVar.eq(totPic-1).width();
$('ul.iStu12 li.images div.slide').find('div.slidePanel:last').remove().prependTo('ul.iStu12 li.images div.slide');
}
$('ul.iStu12 li.images div.slide').css({left:-curPicWidth,
complete: function() {
/* animate the first image to left = 0 */
$('ul.iStu12 li.images div.slide').animate({left:0}, speed);
}
});
/* get the width, height and alt for the currently displayed image */
picVar = $('.iStu12 li.images div.slide div.slidePanel');
curPicWidth = picVar.eq(0).width();
curPicHeight = 480;
/* animate the containing elements and left/right arrow positions to match the current image */
resize(curPicWidth,curPicHeight)
current=clicked;
tabSet ()
}
});
$('.iStu12 li.caption b').mouseover (function() {
if ($(this).index()!==current) {
$(this).css('background',tabCurrent);
}
}).mouseout(function(){
if ($(this).index()!==current) {
$(this).css('background',tabColor);
}
});
function tabSet () {
captionVar.css('background',tabColor);
captionVar.eq(current).css('background',tabCurrent);
}
/* resize the containing elements, the left/right arrow positions and update the caption */
function resize (w,h) {
$('.iStu12').animate({width:w, height:h},speed);
$('.iStu12 li.images').animate({width:w, height:h},speed);
}
});
<script type="text/javascript" src="js/loader.js"></script>
<script type="text/javascript" src="js/stu12.js"></script>
首先是ajax内容，然后是滑块的js
这是loader.js的内容：
$(document).ready(function(){
// load home when the page loads
$("#content").load("home.html", function(){
$(this).fadeIn("slow");
});
// load artworks page
$("#artworks > a").click(function(){
$("#content").hide();
$("#content").load("artworks.html", function(){
$(this).fadeIn("slow");
});
});
// load projects page
$("#artworks ul li a").click(function(){
$("#content").hide();
$("#content").load("project.html", function(){
$(this).fadeIn("slow");
});
});
// load single project page
$("#project_page").live("click", function(){
$("#content").hide();
$("#content").load("project.html", function(){
$(this).fadeIn("slow");
});
});
// load single project page
$("#project_slider").live("click", function(){
$("#content").hide();
$("#content").load("project_inside.html", function(){
$(this).fadeIn("slow");
});
});
// back to projects page
$(".back").live("click", function(){
$("#content").hide();
$("#content").load("project.html", function(){
$(this).fadeIn("slow");
});
});
// load prensa page
$("#prensa_nav").click(function(){
$("#content").hide();
$("#content").load("prensa.html", function(){
$(this).fadeIn("slow");
});
});
// load contacto page
$("#contacto_nav").click(function(){
$("#content").hide();
$("#content").load("contacto.html", function(){
$(this).fadeIn("slow");
});
});
// active menu item
$(function() {
$('#menu li').click(function() {
$('#menu li').each(function() {
$(this).removeClass('active');
});
$(this).addClass('active');
});
});
/* Menu dropdown */
$(document).ready(function($){
// Add class of drop if item has sub-menu
$('ul.submenu').closest('li').addClass('drop');
// Left Sidebar Main Navigation
var menu_ul = $('.menu > li.drop > ul'),
menu_a = $('.menu > li.drop > a');
menu_ul.hide()
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
});
答案 0 :(得分：2)
查看stu12.js，它不适用于异步加载到各种slidePanel div中的数据。
要解决此问题，我建议您在将slidePanel加载到HTML中后加载JS。
查看代码，我不确定slidePanel的加载位置？在其中一个动态加载的HTML文件中？如果有多个HTML文件包含这些滑动面板，则会出现问题。
因此，首先从HTML中删除此行：
<script type="text/javascript" src="js/stu12.js"></script>
如果slidePanel只在一个HTML文件中，那么在语句$(this).fadeIn("slow");之前为相关的HTML加载添加它以动态加载滑块JavaScript：
$.getScript("js/stu12.js")
.done(function(script, textStatus) {
console.log( textStatus );
})
.fail(function(jqxhr, settings, exception) {
console.log( "Error loading stu12.js: " + exception);
});
如果您在动态加载多个HTML页面中有这些滑动面板，那么我建议您更改JavaScript以便所有 HTML页面在页面加载时动态加载，但隐藏在不同的页面中然后可以使用不同的单击函数显示div。
然后，您可以在加载所有HTML页面后加载滑块JavaScript：
$('#content').ajaxStop(function() {
$.getScript("js/stu12.js")
.done(function(script, textStatus) {
console.log( textStatus );
})
.fail(function(jqxhr, settings, exception) {
console.log( "Error loading stu12.js: " + exception);
});
});