Question

我正在使用幻灯片插件，可在此处找到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);     
});     
});

Answer 1

问题是$（'div。＃detail_container'）。html（htmlCode）;将创建新内容，以便#slides将被替换为新内容（没有附加事件）。为了做你想做的事你需要破解插件以某种方式使用实时模块（复杂），或者更简单地重新执行

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

取代html后

尝试动态更改包含滑块的div

1 个答案: