Question

使用此代码http://jquery.malsup.com/cycle/begin.html的Jquery循环插件

jQuery(function($) {

$('#s2').cycle({ 
    fx: 'scrollDown' 
});

});

我正在尝试循环特色属性。我得到它的工作，但我只需要带有内部类的容器div来循环，而不是其中的所有元素。

            <div id="s2">
                <div class="inner">
                <h2>{title}</h2>
                <img src="{image001}" width="250" height="175">
                <div id="partial-details">
                    <ul class="partial-details-a">
                        <li><span class="bold">ZAR: </span><span class="highlight">{property_price}</span></li>
                        <li><span class="bold">Web Reference:</span> {web_reference}</li>
                        <li><span class="bold">Erf Size:</span> {property_erfsize}</li>
                        <li><span class="bold">Building Size:</span> {property_buildingsize}</li>
                    </ul>
                    <ul class="partial-details-a partial-details-b">
                        <li class="bedrooms">{property_bedrooms}</li>
                        <li class="bathrooms">{property_bathrooms}</li>
                        <li class="garages">{property_garages}</li>
                    </ul>
                    <h3>Property Details:</h3>
                    <p>{property_snippet}</p>
                    <em><a href="#">Details</a></em>
                </div><!-- end partial details-->   
            </div><!-- end inner-->

            <div class="inner">
                <h2>{title}</h2>
                <img src="{image001}" width="250" height="175">
                <div id="partial-details">
                    <ul class="partial-details-a">
                        <li><span class="bold">ZAR: </span><span class="highlight">{property_price}</span></li>
                        <li><span class="bold">Web Reference:</span> {web_reference}</li>
                        <li><span class="bold">Erf Size:</span> {property_erfsize}</li>
                        <li><span class="bold">Building Size:</span> {property_buildingsize}</li>
                    </ul>
                    <ul class="partial-details-a partial-details-b">
                        <li class="bedrooms">{property_bedrooms}</li>
                        <li class="bathrooms">{property_bathrooms}</li>
                        <li class="garages">{property_garages}</li>
                    </ul>
                    <h3>Property Details:</h3>
                    <p>{property_snippet}</p>
                    <em><a href="#">Details</a></em>
                </div><!-- end partial details-->   
            </div><!-- end inner--></div><!-- end s2-->

Answer 1

它似乎工作得很好。它只显示内部div并向下滑动。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
    <script type="text/javascript" charset="utf-8">
     jQuery(function($) {

   $('#s2').cycle({ 
       fx: 'scrollDown' 
   });

   });

    </script>
</head>
<body>

  <div id="s2">
              <div class="inner">
              <h2>{title}</h2>
              <img src="{image001}" width="250" height="175">
              <div id="partial-details">
                  <ul class="partial-details-a">
                      <li><span class="bold">ZAR: </span><span class="highlight">{property_price}</span></li>
                      <li><span class="bold">Web Reference:</span> {web_reference}</li>
                      <li><span class="bold">Erf Size:</span> {property_erfsize}</li>
                      <li><span class="bold">Building Size:</span> {property_buildingsize}</li>
                  </ul>
                  <ul class="partial-details-a partial-details-b">
                      <li class="bedrooms">{property_bedrooms}</li>
                      <li class="bathrooms">{property_bathrooms}</li>
                      <li class="garages">{property_garages}</li>
                  </ul>
                  <h3>Property Details:</h3>
                  <p>{property_snippet}</p>
                  <em><a href="#">Details</a></em>
              </div><!-- end partial details-->   
          </div><!-- end inner-->

          <div class="inner">
              <h2>{title}</h2>
              <img src="{image001}" width="250" height="175">
              <div id="partial-details">
                  <ul class="partial-details-a">
                      <li><span class="bold">ZAR: </span><span class="highlight">{property_price}</span></li>
                      <li><span class="bold">Web Reference:</span> {web_reference}</li>
                      <li><span class="bold">Erf Size:</span> {property_erfsize}</li>
                      <li><span class="bold">Building Size:</span> {property_buildingsize}</li>
                  </ul>
                  <ul class="partial-details-a partial-details-b">
                      <li class="bedrooms">{property_bedrooms}</li>
                      <li class="bathrooms">{property_bathrooms}</li>
                      <li class="garages">{property_garages}</li>
                  </ul>
                  <h3>Property Details:</h3>
                  <p>{property_snippet}</p>
                  <em><a href="#">Details</a></em>
              </div><!-- end partial details-->   
          </div><!-- end inner--></div><!-- end s2-->


</body>
</html>

用jquery循环插件定位父div

1 个答案: