我正在使用可以在http://slidesjs.com/上找到的幻灯片插件。我测试了插件,它可以工作。我试图在 jquery 函数中设置它,如果单击菜单上的 div 更改并且滑块的图像发生更改,则 div 已更改但滑块变为静态。
HTML 代码
<script>
$(function(){
$('#slides').slides({
preload: true,
play: 9500,
pause: 3500,
hoverPause: true,
pagination: false
});
});
</script>
<div class="auto-style1">
<div>
<a href="menu1.html" class="menuLink">Hotels</a>
<ul class="menu" id="menu1">
<li class="hotel" hotel="ogudu" id="DGH"><a href="#" >DATANOMICS GUEST HOUSE,OGUDU</a> </li>
<li hotel=""><a href="#" >DATANOMICS HOTEL, SHOMULU</a></li>
<li class="hotel" hotel="akure"><a href="#" >PARLIAMENT HOTEL AKURE</a></li>
<li class="hotel" hotel="ishua"><a href="#" >ISHUA HOTEL, ISHUA</a> </li>
<li><a href="index.php">Back to Main Menu</a></li>
</ul>
</div>
</div>
<div class="detail_container" id="detail_container">
<div class="hotel_details">
</div>
</div>
<div class="hotel_details_container">
<div class="hotel_details" id="ogudu">
<div id="slides">
<div class="slides_container">
<a target="_blank"><img image1 width="675" height="375" alt="Slide 1"></a>
<a target="_blank"><img image2 width="675" height="375" alt="Slide 2"></a>
<a target="_blank"><img image3 width="675" height="375" alt="Slide 3"></a>
<a target="_blank"><img image4 height="375" alt="Slide 4"></a>
<a target="_blank"><img image5 width="675" height="375" alt="Slide 5"></a>
<a target="_blank"><img image6 width="675" height="375" alt="Slide 6"></a>
<a target="_blank"><img image7 width="675" height="375" alt="Slide 7"></a>
</div>
</div><!--end of slides container-->
<div class="detail_containerinfo">
<h2>Datanomics Guest House</h2>
<p>Datanomics Guest House is one of the loveliest luxury hotels on the Lagos Mainland, an authentic Art Nouveau palace that offers a warm inviting welcome and the delights of a true 4-star vacation. </p>
<br />
<p>
Datanomics Guest House
</p>
<br />
<p>Discover a world of temptations in what we call the D Vacation… experience the pleasures of a holiday with the unique atmosphere and flavours you will only find here at Datanomics.</p>
</div>
<div class="clear_both">
</div>
</div>
jQuery
$('#DGH').click(function()
{
$('#DGH').removeClass('selected');
$(this).addClass('selected');
var hotel = '.hotel_details#' + $(this).attr('hotel');
var htmlCode =$(hotel).html();
$('div.#detail_container').fadeOut(500,function(){
$('div.#detail_container').html(htmlCode);
$('div.#detail_container').fadeIn(500);
});
});