-1
我有使用jquery.jcarousel.min.js準備的圖像的幻燈片放映。
現在在同一頁面上我想要複製相同的幻燈片。如何在同一頁面上覆制幻燈片放映？
是我代碼：
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage" data-jcarousel="true">
<ul style="left: 0px; top: 0px;">
<li><img src="http://localhost/classapp/Images/Jsc/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="http://localhost/classapp/Images/Jsc/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
</p>
<a href="#" class="prev prev-stage inactive" data-jcarouselcontrol="true"><span>‹</span></a>
<a href="#" class="next next-stage" data-jcarouselcontrol="true"><span>›</span></a>
</div>
<div class="navigation">
<a href="#" class="prev prev-navigation inactive" data-jcarouselcontrol="true">‹</a>
<a href="#" class="next next-navigation" data-jcarouselcontrol="true">›</a>
<div class="carousel carousel-navigation" data-jcarousel="true">
<ul style="left: 0px; top: 0px;">
<li data-jcarouselcontrol="true" class="active">
<img src="http://localhost/classapp/Images/Jsc/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true">
<img src="http://localhost/classapp/Images/Jsc/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
我的javascript代碼
JS使用jquery.jcarousel.min.js
<script language="javascript">
var connector = function(itemNavigation, carouselStage) {
return carouselStage.jcarousel('items').eq(itemNavigation.index());
};
function ShowJsSlideShow()
{
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
// We loop through the items of the navigation carousel and set it up
// as a control for an item from the stage carousel.
carouselNavigation.jcarousel('items').each(function() {
var item = $(this);
// This is where we actually connect to items.
var target = connector(item, carouselStage);
item
.on('jcarouselcontrol:active', function() {
carouselNavigation.jcarousel('scrollIntoView', this);
item.addClass('active');
})
.on('jcarouselcontrol:inactive', function() {
item.removeClass('active');
})
.jcarouselControl({
target: target,
carousel: carouselStage
});
});
// Setup controls for the stage carousel
$('.prev-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
// Setup controls for the navigation carousel
$('.prev-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
}
$(document).ready(function() {
ShowJsSlideShow();
});
</script>
是可以對同一拉同樣的網頁使用jQuery而不需要在服務器上的代碼方？
你需要上傳你的照片，不是來自PC的文件位置，互聯網不能像那樣工作。 –
您可以在創建「幻燈片放映」的位置分享您的JavaScript代碼嗎？ – Reza