Javascript JQuery中带滑块标题的Problam
我制作了一个滑块,效果很好,但是下面没有显示每个图像的标题。请查看我的代码: 我的Html代码是Javascript JQuery中带滑块标题的Problam,javascript,jquery,slider,Javascript,Jquery,Slider,我制作了一个滑块,效果很好,但是下面没有显示每个图像的标题。请查看我的代码: 我的Html代码是 <div id="jDesign_slider"> <div id="jDesign"> <div id="jDesign_nav"> <a rel="img1" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/201
<div id="jDesign_slider">
<div id="jDesign">
<div id="jDesign_nav"> <a rel="img1" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Tulips3.jpg" /></a>
<a rel="img2" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Desert2.jpg" /></a>
<a rel="img3" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Chrysanthemum3.jpg" /></a>
</div>
<div id="jDesign_output">
<img id="img1" src="http://localhost/wordpress/wp-content/uploads/2014/10/Tulips3.jpg" />
<h3>title1</h3>
<img id="img2" src="http://localhost/wordpress/wp-content/uploads/2014/10/Desert2.jpg" />
<h3>title2</h3>
<img id="img3" src="http://localhost/wordpress/wp-content/uploads/2014/10/Chrysanthemum3.jpg" />
<h3>title3</h3>
</div>
<div class="clear"></div>
</div>
</div>
我的Jquery代码是
<script language="javascript">
$(document).ready(function() {
$("#jDesign_output img").not(":first").hide();
$("#jDesign_output h3").not(":first").hide();
$("#jDesign a").click(function() {
if ( $("#" + this.rel).is(":hidden") ) {
$("#jDesign_output img").fadeOut();
$("#jDesign_output h3").fadeOut();
$("#" + this.rel).fadeIn();
}
});
});
</script>
jQuery:
$(document).ready(function() {
// $("#jDesign_output img").not(":first").hide();
// $("#jDesign_output h3").not(":first").hide();
$("#jDesign_output div").not(":first").hide();
$("#jDesign a").click(function() {
if ( $("#" + this.rel).is(":hidden") ) {
// $("#jDesign_output img").fadeOut(100);
// $("#jDesign_output h3").fadeOut(100);
$("#jDesign_output div").hide(100);
//$("#" + this.rel).find('img').fadeIn(1000);
$("#" + this.rel).fadeIn(1000);
}
});
});
HTML:
<div id="jDesign_slider">
<div id="jDesign">
<div id="jDesign_nav">
<a rel="img1" href="javascript:void(0);"><img src="image/page1_pic1.jpg" /></a>
<a rel="img2" href="javascript:void(0);"><img src="image/page1_pic2.jpg" /></a>
<a rel="img3" href="javascript:void(0);"><img src="image/page1_pic4.jpg" /></a>
</div>
<div id="jDesign_output">
<div id="img1">
<img src="image/page1_pic1.jpg" />
<h3>title1</h3>
</div>
<div id="img2">
<img src="image/page1_pic2.jpg" />
<h3>title2</h3>
</div>
<div id="img3">
<img src="image/page1_pic4.jpg" />
<h3>title3</h3>
</div>
</div>
<div class="clear"></div>
</div>
</div>
tanx非常感谢你。