0

我正在使用可以在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);     
});     
});
4

1 回答 1

0

问题是 $('div.#detail_container').html(htmlCode); 将创建新内容,因此#slides 将被替换为新内容(不附加任何事件)。为了做你想做的事,你要么需要破解插件以某种方式使用实时模块(复杂),要么更简单地重新执行

$('#slides').slides({
preload: true,
play: 9500,
pause: 3500,
hoverPause: true,
pagination: false           
});

替换 html 后

于 2012-04-29T18:35:13.847 回答