我制作了5张幻灯片,并为他们制作了一个隐藏幻灯片jquery,我的问题是,在我展示了隐藏的幻灯片后,他们不再响应,这只是幻灯片最后一张图片的静态图像。
<div class="container">
<div id="slides">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides0">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides1">
<img src="img/room.jpg" />
<img src="img/bathroom.jpg" />
<img src="img/diningroom.jpg" />
<img src="img/balcony.jpg" />
</div>
<div id="slides2">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides3">
<img src="img/room.jpg" />
<img src="img/bathroom.jpg" />
<img src="img/diningroom.jpg" />
<img src="img/balcony.jpg" />
</div>
</div>
那么我的隐藏显示jquery是
// JavaScript Document
$(function() {
$("#slides").show();
$("#slides0,#slides1,#slides2,#slides3").hide();
$("#intro").click(function(){
$("#slides0,#slides1,#slides2,#slides3").hide();
});
$("#intro").click(function(){
$("#slides").show();
});
$("#single").click(function(){
$("#slides,#slides1,#slides2,#slides3").hide();
});
$("#single").click(function(){
$("#slides0").show();
});
$("#double").click(function(){
$("#slides,#slides0,#slides2,#slides3").hide();
});
$("#double").click(function(){
$("#slides1").show();
});
$("#family").click(function(){
$("#slides,#slides0,#slides1,#slides3").hide();
});
$("#family").click(function(){
$("#slides2").show();
});
$("#deluxe").click(function(){
$("#slides,#slides0,#slides1,#slides2").hide();
});
$("#deluxe").click(function(){
$("#slides3").show();
});
});
以及SlideJs制作的滑块jquery,我为多个幻灯片添加了它
// JavaScript Document
$(function() {
$('#slides').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides0').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides1').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides2').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides3').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
这是网页:Slider
您在Slide.Js被调用后隐藏/显示幻灯片,因为它们不起作用。尝试将最后一块代码封装在一个函数中,并在每次执行第二块代码时调用它
首先,你不应该重复这些功能,做一些类似的事情
function active_slidesjs(slidesID){//slidesID is your elements
slidesID.slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
}
然后当你点击你的元素时,调用像这样的函数
$("#single").click(function(){
$("#slides,#slides1,#slides2,#slides3").hide();
active_slidesjs($(this));
});
语法可能是错误的,但想法是存在