Question

我制作了一个滑块。工作完美，但每张图片的标题都没有显示在下面。请看我的代码：

我的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/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>

Answer 1

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>

JQuery中滑块标题的问题

1 个答案: