我在实现jquery内容轮播时遇到问题（通过：http://tympanus.net/codrops/2011/08/16/circular-content-carousel/）
在这里，它按预期工作： http://www.sophiadeboer.nl/carousel/carousel.php
在这里用对象标签调用它： ROOT /＃服务
问题在于，当我使用html对象标签时，轮播在打开div的内容后会中断。
<object width="500" height="400" data='carousel/carousel.php'></object>
无法使用该对象。为什么在使用object标签在另一个页面中调用后，相同的内容会中断？
代码：
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<? foreach ($carousel as $carouselrow) { ?>
<div class="ca-item ca-item-<? echo $carouselrow['ID']; ?>">
<div class="ca-item-main">
<div class="ca-icon" style="background-image:url('<? echo $carouselrow['Image']; ?>')"></div>
<h3><? echo $carouselrow['Title']; ?></h3>
<h4>
<span class="ca-quote">“</span>
<span><? echo $carouselrow['Subtitle']; ?></span>
</h4>
<a href="#" class="ca-more">Lees meer...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6><? echo $carouselrow['Title']; ?></h6>
<a href="#" class="ca-close">Sluit</a>
<div class="ca-content-text">
<p><? echo $carouselrow['Content']; ?></p>
</div>
</div>
</div>
</div>
<? } ?>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel({
// speed for the sliding animation
sliderSpeed: 500,
// easing for the sliding animation
sliderEasing: 'easeOutExpo',
// speed for the item animation (open / close)
itemSpeed: 500,
// easing for the item animation (open / close)
itemEasing: 'easeOutExpo',
// number of items to scroll at a time
scroll: 1,
// if it loops (true/false)
infinite: false
});
</script>
来自jquery.contentcarousel.js的代码：
(function ($) {
var aux = {
// navigates left / right
navigate: function (dir, $el, $wrapper, opts, cache) {
var scroll = opts.scroll,
factor = 1,
idxClicked = 0;
if (cache.expanded) {
scroll = 1; // scroll is always 1 in full mode
factor = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item
idxClicked = cache.idxClicked; // the index of the clicked item
}
if (dir == -1 && !opts.infinite && $wrapper.find('div.ca-item').first().position().left == 0) {
cache.isAnimating = false;
return;
}
if (dir == 1 && !opts.infinite && $wrapper.find('div.ca-item').last().position().left == (cache.itemW * factor * scroll)) {
cache.isAnimating = false;
return;
}
// clone the elements on the right / left and append / prepend them according to dir and scroll
if (opts.infinite) {
if (dir === 1) {
$wrapper.find('div.ca-item:lt(' + scroll + ')').each(function (i) {
$(this).clone(true).css('left', (cache.totalItems - idxClicked + i) * cache.itemW * factor + 'px').appendTo($wrapper);
});
}
else {
var $first = $wrapper.children().eq(0);
$wrapper.find('div.ca-item:gt(' + (cache.totalItems - 1 - scroll) + ')').each(function (i) {
// insert before $first so they stay in the right order
$(this).clone(true).css('left', -(scroll - i + idxClicked) * cache.itemW * factor + 'px').insertBefore($first);
});
}
}
// animate the left of each item
// the calculations are dependent on dir and on the cache.expanded value
$wrapper.find('div.ca-item').each(function (i) {
var $item = $(this),
$left = (dir === 1) ? '-=' + (cache.itemW * factor * scroll) + 'px' : '+=' + (cache.itemW * factor * scroll) + 'px';
$item.stop().animate({
left: $left
}, opts.sliderSpeed, opts.sliderEasing, function () {
if ((dir === 1 && $item.position().left < -idxClicked * cache.itemW * factor) || (dir === -1 && $item.position().left > ((cache.totalItems - 1 - idxClicked) * cache.itemW * factor))) {
// remove the item that was cloned
if (opts.infinite)
$item.remove();
}
cache.isAnimating = false;
});
});
},
// opens an item (animation) -> opens all the others
openItem: function ($wrapper, $item, opts, cache) {
cache.idxClicked = $item.index();
// the item's position (1, 2, or 3) on the viewport (the visible items)
cache.winpos = aux.getWinPos($item.position().left, cache);
$wrapper.find('div.ca-item').not($item).hide();
$item.find('div.ca-content-wrapper').css('left', cache.itemW + 'px').stop().animate({
width: cache.itemW * 2 + 'px',
left: cache.itemW + 'px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left: '0px'
}, opts.itemSpeed, opts.itemEasing, function () {
cache.isAnimating = false;
cache.expanded = true;
aux.openItems($wrapper, $item, opts, cache);
});
},
// opens all the items
openItems: function ($wrapper, $openedItem, opts, cache) {
var openedIdx = $openedItem.index();
$wrapper.find('div.ca-item').each(function (i) {
var $item = $(this),
idx = $item.index();
if (idx !== openedIdx) {
$item.css('left', -(openedIdx - idx) * (cache.itemW * 3) + 'px').show().find('div.ca-content-wrapper').css({
left: cache.itemW + 'px',
width: cache.itemW * 2 + 'px'
});
// hide more link
aux.toggleMore($item, false);
}
});
},
// show / hide the item's more button
toggleMore: function ($item, show) {
(show) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide();
},
// close all the items
// the current one is animated
closeItems: function ($wrapper, $openedItem, opts, cache) {
var openedIdx = $openedItem.index();
$openedItem.find('div.ca-content-wrapper').stop().animate({
width: '0px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left: cache.itemW * (cache.winpos - 1) + 'px'
}, opts.itemSpeed, opts.itemEasing, function () {
cache.isAnimating = false;
cache.expanded = false;
});
// show more link
aux.toggleMore($openedItem, true);
$wrapper.find('div.ca-item').each(function (i) {
var $item = $(this),
idx = $item.index();
if (idx !== openedIdx) {
$item.find('div.ca-content-wrapper').css({
width: '0px'
})
.end()
.css('left', ((cache.winpos - 1) - (openedIdx - idx)) * cache.itemW + 'px')
.show();
// show more link
aux.toggleMore($item, true);
}
});
},
// gets the item's position (1, 2, or 3) on the viewport (the visible items)
// val is the left of the item
getWinPos: function (val, cache) {
switch (val) {
case 0 :
return 1;
break;
case cache.itemW :
return 2;
break;
case cache.itemW * 2 :
return 3;
break;
}
}
},
methods = {
init: function (options) {
if (this.length) {
var settings = {
sliderSpeed: 500, // speed for the sliding animation
sliderEasing: 'easeOutExpo', // easing for the sliding animation
itemSpeed: 500, // speed for the item animation (open / close)
itemEasing: 'easeOutExpo', // easing for the item animation (open / close)
scroll: 1, // number of items to scroll at a time
infinite: true // tells carousel wether or not to clone items and/or continue scroll past first and last
};
return this.each(function () {
// if options exist, lets merge them with our default settings
if (options) {
$.extend(settings, options);
}
var $el = $(this),
$wrapper = $el.find('div.ca-wrapper'),
$items = $wrapper.children('div.ca-item'),
cache = {};
// save the with of one item
cache.itemW = $items.width();
// save the number of total items
cache.totalItems = $items.length;
// add navigation buttons
if (cache.totalItems > 3)
$el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>')
// control the scroll value
if (settings.scroll < 1)
settings.scroll = 1;
else if (settings.scroll > 3)
settings.scroll = 3;
var $navPrev = $el.find('span.ca-nav-prev'),
$navNext = $el.find('span.ca-nav-next');
// hide the items except the first 3
$wrapper.css('overflow', 'hidden');
// the items will have position absolute
// calculate the left of each item
$items.each(function (i) {
$(this).css({
position: 'absolute',
left: i * cache.itemW + 'px'
});
});
// click to open the item(s)
$el.find('a.ca-more').live('click.contentcarousel', function (event) {
if (cache.isAnimating)
return false;
cache.isAnimating = true;
$(this).hide();
var $item = $(this).closest('div.ca-item');
aux.openItem($wrapper, $item, settings, cache);
return false;
});
// click to close the item(s)
$el.find('a.ca-close').live('click.contentcarousel', function (event) {
if (cache.isAnimating)
return false;
cache.isAnimating = true;
var $item = $(this).closest('div.ca-item');
aux.closeItems($wrapper, $item, settings, cache);
return false;
});
// navigate left
$navPrev.bind('click.contentcarousel', function (event) {
if (cache.isAnimating)
return false;
cache.isAnimating = true;
aux.navigate(-1, $el, $wrapper, settings, cache);
});
// navigate right
$navNext.bind('click.contentcarousel', function (event) {
if (cache.isAnimating)
return false;
cache.isAnimating = true;
aux.navigate(1, $el, $wrapper, settings, cache);
});
// adds events to the mouse
$el.bind('mousewheel.contentcarousel', function (e, delta) {
if (delta > 0) {
if (cache.isAnimating)
return false;
cache.isAnimating = true;
aux.navigate(-1, $el, $wrapper, settings, cache);
}
else {
if (cache.isAnimating)
return false;
cache.isAnimating = true;
aux.navigate(1, $el, $wrapper, settings, cache);
}
return false;
});
});
}
}
};
$.fn.contentcarousel = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.contentcarousel');
}
};
})(jQuery);
答案 0 :(得分：0)
您是否尝试使用<embed> src属性来加载您的网页，而不是<object data=？
See object/embed tag reference here
答案 1 :(得分：0)
它无法正常工作的原因必须是3个碰撞的jquery版本。我现在通过使内容与另一个jquery版本一起使用来成功实现它，所以我只有2个版本使用jquery noconflict模式运行。