0

我正在使用 jQuery Cycle 插件对画廊中的一些图像进行分页，并且我希望在该项目处于活动状态时更改部分页面项目的颜色。

HTML：

<div style="background-color:#000000; height:480px; width:285px; float:left;">
<ul id="nav">
   <li>
   <a class="red" href="#">
   <span class="red">Sports</span><br>
   Get your sports here.
   </a>
   </li>

   <li>
   <a class="red" href="#">
   <span class="red">Topics</span><br>
   Topics here.
   </a>
   </li>

   <li>
   <a class="red" href="#">
   <span class="red">News</span><br>
   Fit news for an unfit people.
   </a>

   </li>

   <li>
   <a class="red" href="#">
   <span class="red">Weather</span><br>
   Sunny or Cloudy?
   </a>

   </li>
  </ul> 
</div>

CSS：

.red {
color:#F00;
}
.black {
color:#000000;
}
#slideshow { float: left; width:auto; position:relative; }
#nav { width: 245px; overflow:auto; height:auto; float: left; background-color:#000000; color:#FFFFFF; margin-top:0px; overflow:hidden; }
#nav li {width: 285px; height:80px; display:block; float: left; list-style: none; margin-left:-40px; }
#nav a {width: 285px; height:80px; display: block; color:#FFFFFF; text-decoration:none; font-size:13px; line-height:18px;}
#nav li.activeSlide a { background: #FF0000; color:#FFFFFF; text-decoration:none; font-size:13px; line-height:18px;}
#nav a:focus { outline: none; text-decoration:none; font-size:13px; line-height:18px;}
#nav a:hover { outline: none; color:#888888; text-decoration:none; font-size:13px;  line-height:18px;}
#imgBox { width:570px; z-index:-9;}

Cycle 插件脚本：

<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 6000,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        }
    });
});
</script>

不起作用的脚本：

<script type="text/javascript">
  $("#nav li.activeSlide a").activeSlide(function() {
  $(this).removeClass('red').siblings().addClass('black');
 });​
</script>
4

0 回答 0