我希望有人能够提供帮助。我一直在努力解决这个问题几天。我正在使用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> </p>
<div id="Cell">
<p class="line"> </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;
答案 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年内未更新。