Javascript JS缩略图滑块不适用于AJAX？
这是我的JSP页面：Javascript JS缩略图滑块不适用于AJAX？,javascript,jquery,css,ajax,Javascript,Jquery,Css,Ajax,这是我的JSP页面： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <script src="js/jquery.js" type="text/javascript"></scr
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#carouselh').jsCarousel({ autoscroll: false, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });
});
function change()
{
$.ajax({
type: "POST",
url: 'demoo.jsp',
data: { },
success: function(result)
{
document.getElementById('main').innerHTML=result;
}
});
}
</script>
</head>
<body>
<button onclick="change()">Click Me!</button>
<div id="main">
</div>
</body>
<script src="js/jsCarousel-2.0.0.js" type="text/javascript"></script>
<link href="css/jsCarousel-2.0.0.css" rel="stylesheet" type="text/css" >
</html>
当我在单个页面上使用此滑块时，它工作正常，图像也在滑动，但当我使用AJAX获取响应时，滑块停止工作。由于某些原因，我不得不使用此滑块，但似乎找不到错误。这里有很多代码。这是一个猜测，但不是文档。就绪（函数）请尝试ajaxComplete（函数）。如果可以将其放入JSFIDLE中，这将非常有用。@Iharby我不知道在JSFIDLE中放置外部js的位置。它位于外部资源下@AK2@Iharby我知道，但不知道把我的代码放在哪里
<div id="carouselh">
<div>
<img alt="" src="images/lapi_large.jpg" style="height: 100px;width: 100px;float: left;" /><br />
</div>
<div>
<img alt="" src="images/mobile_small.jpg" style="height: 100px;width: 100px;float: left;" /><br />
</div>
<div>
<img alt="" src="images/lapi_large.jpg" style="height: 100px;width: 100px;float: left;" /><br />
</div>
<div>
<img alt="" src="images/mobile_small.jpg" style="height: 100px;width: 100px;float: left;" /><br />
</div>
<div>
<img alt="" src="images/lapi_large.jpg" style="height: 100px;width: 100px;float: left;" /><br />
</div>
<div>
<img alt="" src="images/mobile_small.jpg" style="height: 100px;width: 100px;float: left;" /><br />
</div>
<div>
<img alt="" src="images/mobile_small.jpg" style="height: 100px;width: 100px;float: left;" /><br />
</div>
<div>
<img alt="" src="images/mobile_small.jpg" style="height: 100px;width: 100px;float: left;" /><br />
</div>
</div>
(function($) {
$.fn.extend({
jsCarousel: function(options) {
var settings = $.extend({
scrollspeed: 1500,
delay: 5000,
itemstodisplay: 5,
autoscroll: false,
circular: false,
masked: true,
orientation: 'h'
}, options);
return this.each(function() {
var oclass = 'horizontal';
if (settings.orientation == 'v')
oclass = 'vertical';
var slidercontents = $(this).addClass('jscarousal-contents-' + oclass + '');
var slider = $('<div/>').addClass('jscarousal-' + oclass + '').attr('id', slidercontents.attr('id'));
var backbutton = $('<div/>').addClass('jscarousal-' + oclass + '-back');
var forwardbutton = $('<div/>').addClass('jscarousal-' + oclass + '-forward');
slidercontents.removeAttr('id');
slidercontents.before(slider);
slider.append(backbutton);
slider.append(slidercontents);
slider.append(forwardbutton);
var total = $('> div', slidercontents).css('display', 'none').length;
var index = 0;
var start = 0;
var current = $('<div/>');
var noOfBlocks;
var interval;
var display = settings.itemstodisplay;
var speed = settings.scrollspeed;
var top;
var left;
var height;
var containerHeight;
var containerWidth;
var direction = "forward";
var scrolling = true;
function initialize() {
index = -1;
noOfBlocks = parseInt(total / display);
if (total % display > 0) noOfBlocks++;
index = noOfBlocks - 1;
var startIndex = 0;
var endIndex = display;
var copy = false;
var allElements = $('> div', slidercontents);
$('> div', slidercontents).remove();
if (settings.masked)
allElements.addClass('thumbnail-inactive').hover(function() { $(this).removeClass('thumbnail-inactive').addClass('thumbnail-active'); }, function() { $(this).removeClass('thumbnail-active').addClass('thumbnail-inactive'); })
for (var i = 0; i < noOfBlocks; i++) {
if (total > display) {
startIndex = i * display;
endIndex = startIndex + display;
if (endIndex > total) {
startIndex -= (endIndex - total);
endIndex = startIndex + display;
copy = true;
}
}
else {
startIndex = 0;
endIndex = total;
}
var wrapper = $('<div/>')
allElements.slice(startIndex, endIndex).each(function(index, el) {
if (!copy)
wrapper.append(el);
else wrapper.append($(el).clone(true));
});
slidercontents.append(wrapper);
}
if (settings.onthumbnailclick != null)
$('> div > div', slidercontents).css('cursor', 'pointer');
$('> div', slidercontents).addClass('hidden');
$('> div > div', slidercontents).css('display', '');
/*vertical*/
if (settings.orientation == 'v') {
top = $('> div:eq(' + index + ')', slidercontents).css('top');
if (top == 'auto') top = "0px";
containerHeight = slidercontents.height();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('top', '-' + containerHeight + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ 'top': top }, speed, function() { scrolling = false; });
}
/*horizontal*/
if (settings.orientation == 'h') {
left = $('> div:eq(' + index + ')', slidercontents).css('left');
containerWidth = slidercontents.width();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('left', '-' + containerWidth + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ left: 0 }, speed, function() { scrolling = false; });
}
$('> div:eq(' + index + ')', slidercontents).addClass('visible').removeClass('hidden');
slider.mouseenter(function() { if (settings.autoscroll) stopAnimate(); }).mouseleave(function() { if (settings.autoscroll) animate(); });
if (settings.autoscroll)
animate();
forwardbutton.click(function() {
if (!scrolling) {
direction = "forward";
if (settings.circular)
if (index <= 0) index = noOfBlocks;
showThumbs();
}
});
backbutton.click(function() {
if (!scrolling) {
direction = "backward";
if (settings.circular)
if (index >= noOfBlocks - 1) index = -1;
showThumbs();
}
});
}
initialize();
function stopAnimate() {
scrolling = false;
clearTimeout(interval);
slider.children().clearQueue();
slider.children().stop(false, true);
}
function animate() {
clearTimeout(interval);
if (settings.autoscroll)
interval = setTimeout(changeSlide, settings.delay);
}
function changeSlide() {
if (direction == "forward") {
if (index <= 0) index = noOfBlocks;
} else {
if (index >= noOfBlocks - 1) { index = -1; }
}
showThumbs();
interval = setTimeout(changeSlide, settings.delay);
}
function getDimensions(value) {
return value + 'px';
}
function showThumbs() {
scrolling = true;
var current = $('.visible', slidercontents);
var scrollSpeed = speed;
if (direction == "forward") {
index--;
if (index >= 0) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).css('top', getDimensions(containerHeight)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '-=' + getDimensions(containerHeight) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', top);
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).css('left', getDimensions(containerWidth)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', left);
scrolling = false;
});
}
} else index = 0;
}
else if (direction == "backward") {
index++;
if (index < noOfBlocks) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'top': getDimensions(-containerHeight)
}).stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '+=' + getDimensions(containerHeight) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', getDimensions(-containerHeight));
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'left': getDimensions(-containerWidth)
}).stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', getDimensions(-containerWidth));
scrolling = false;
});
}
} else index = noOfBlocks - 1;
}
}
});
}
});
})(jQuery);
position: relative; /*overflow: hidden;*/
}
.jscarousal-horizontal-back, .jscarousal-horizontal-forward
{
float: left;
width: 23px;
height: 98px;
color: White;
position: relative;
top: 6px;
cursor: pointer;
}
.jscarousal-horizontal-back
{
background-image: url(../images/left_arrow.jpg);
background-repeat: no-repeat;
background-position: left;
}
.jscarousal-horizontal-forward
{
background-image: url(../images/right_arrow.jpg);
background-repeat: no-repeat;
background-position: right;
}
.jscarousal-contents-horizontal
{
float: left;
height: 95px;
overflow: hidden;
position: relative;
width: 403px;
margin-top:10px;
}
.jscarousal-contents-horizontal > div
{
position: absolute;
width: 100%;
height: 124px;
}
.jscarousal-contents-horizontal > div > div
{
float: left;
margin-left: 7px;
margin-right: 7px;
}
.jscarousal-contents-horizontal img
{
width: 120px;
height: 94px;
border: solid 1px #7A7677;
}
.jscarousal-vertical
{
width: 140px;
height: 460px;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.jscarousal-vertical-back, .jscarousal-vertical-forward
{
width: 100%;
height: 30px;
background-color: #121212;
color: White;
position: relative;
cursor: pointer;
z-index:100;
}
.hidden
{
display: none;
}
.visible
{
display: block;
}
.thumbnail-active
{
filter: alpha(opacity=100);
opacity: 1.0;
cursor: pointer;
}
.thumbnail-inactive
{
filter: alpha(opacity=20);
opacity: 0.2;
cursor: pointer;
}