使用 jquery 循环插件以父 div 为目标

发布于 2024-10-31 05:23:35 字数 3298 浏览 2 评论 0原文

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

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-->

原文

Using Jquery cycle plugin from here http://jquery.malsup.com/cycle/begin.html with this code

jQuery(function($) {

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

});

I'm trying to cycle featured property. I get it working, but I need only the container div with the class of inner to cycle, not all the elements inside it.

            <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-->

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情绪 2024-11-07 05:23:35

它似乎工作得很好。它只显示内部 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>

its seems to work just fine. its just show only the inner div and slide that down.

<!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>

回复收藏 0 原文

~没有更多了~