单击时旋转div

时间:2017-12-05 17:06:25

标签: jquery html css

我希望有人能够提供帮助。我一直在努力解决这个问题几天。我正在使用jQuery来点击旋转div。它一直有效,直到我在一个页面上需要两个功能。所以,我有两组div在一个页面上的两个位置旋转,无论我在哪里点击,它都会旋转两组。例如,我使用箭头来旋转div内容,如果我使用第二组箭头,它会同时旋转两组div内容。我希望这两个是独立的 - 能够旋转一组div而不用另一组。



    $(document).ready(function(){
        $("#cslide-slides").cslide();
    });

    /*=Slides
    ----------------------------------------------- */
    .cslide-slides-master {
      overflow: hidden;
     }
    
    .cslide-slides-master:last-child {
      margin-bottom: 0; }
    
    .cslide-slides-container {
      visibility: hidden; }
    
    .cslide-slide {
      float: left;
     }
    /* prev next buttons */
    .cslide-prev-next {
      display: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
    
    .cslide-prev, .cslide-next {
      display: inline-block;
      float: right;
    
      padding: 10px 5px;
    
      cursor: pointer; }
    
    .cslide-prev.cslide-disabled:hover,
    .cslide-next.cslide-disabled:hover {
     }
    
    .cslide-disabled {
      opacity: 0.3; }

<div id="Cell">
    <section id="cslide-slides" class="cslide-slides-master clearfix">
    
                <div class="cslide-slides-container clearfix">
                    <div class="cslide-slide">h4>Insert update headline here</h4>
                        <p>Some text that describes this update</p>
    
                    </div>
                    <div class="cslide-slide">h4>Update 2</h4>
                        <p>Some text that describes this update</p>
                    </div>
                    <div class="cslide-slide"><h4>Update 3</h4><p>Some text that describes this update</p>
                    </div>
                    <div class="cslide-slide">h4>Update 4</h4><p>Some text that describes this update</p>
                    </div>
                    <div class="cslide-slide"><h4>Update 5</h4><p>Some text that describes this update</p>
                    </div>
    
                </div>
                <div class="cslide-prev-next clearfix"><span class="cslide-next"><img src="images/Arrows_navigation_right.png" alt="Right" width="20" height="20"></span>
                    <span class="cslide-prev"><img src="images/Arrows_navigation_left.png" alt="Left" width="20" height="20"></span>
    
                </div>
            </section><!-- /sliding content section -->
    
    
      </div>
      <p>&nbsp;</p>
      
      <div id="Cell">
    
    <p class="line">&nbsp;</p>
    
    <section id="cslide-slides" class="cslide-slides-master clearfix">
    
                <div class="cslide-slides-container clearfix">
                    <div class="cslide-slide"><h4>Insert update headline here</h4>
                        <p>Some text that describes this update</p>
    
                    </div>
                    <div class="cslide-slide"><h4>Update 2</h4>
                        <p>Some text that describes this update</p><a href="PolicyUpdates.html#PolicyUpdate2">Read more</a>
                    </div>
                    <div class="cslide-slide"><h4>Update 3</h4><p>Some text that describes this update</p>
                    </div>
                    <div class="cslide-slide"><h4>Update 4</h4><p>Some text that describes this update</p>
                    </div>
                    <div class="cslide-slide"><h4>Update 5</h4><p>Some text that describes this update</p>
                    </div>
    
                </div>
                <div class="cslide-prev-next clearfix"><span class="cslide-next"><img src="images/Arrows_navigation_right.png" alt="Right" width="20" height="20"></span>
                    <span class="cslide-prev"><img src="images/Arrows_navigation_left.png" alt="Left" width="20" height="20"></span>
    
                </div>
            </section><!-- /sliding content section -->
    </div>






    <script type="text/javascript" src="jquery.cslide.js">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您需要为每个滑块初始化cslide的单独实例。此外,ID应该是唯一的,不能在同一页面上重复使用。这就是课程的用途。

为每个滑块创建一个唯一的ID,并在插件允许的情况下使用该类进行初始化。否则,请使用唯一ID。

<script type="text/javascript" src="jquery.cslide.js"></script>  
<script>
$( document ).ready( function () {
  $( '.cslide-slides-master' ).cslide();
} );
</script>

FWIW使用较新的滑块,您使用的滑块在4年内未更新。