Question

我正在为朋友创建网站，并尝试在幻灯片中添加指向每个图片的链接。幻灯片放映使用jquery和一个名为easySlider1.7.js的脚本。如果图像保持不变，一切正常，但是当我尝试用链接包装图像时，幻灯片不再按照应有的方式进展。这是显示问题的实时网站......

http://www.splits59.com/

以下是每个幻灯片图片的HTML代码......

<div class="covercontent2box">
<div class="covercontent2">
<div id="slideshow">
 <a href="/ashton-jacket-p-107.html"><img src="img/homepagesummer2010_2.2-cut.jpg" class="active" /></a>
 <a href="/carly-coverup-p-106.html"><img src="img/homepagesummer2010_3.2-cut.jpg" /></a>
 <a href="/shop-online-bottoms-c-15_14.html"><img src="img/homepagesummer2010_1.2-cut.jpg" /></a>
</div>
</div>
</div>

这是控制滑块的页面上的jquery代码......

<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 4500 );
});
  </script>

有没有人知道为什么在图片上添加链接标签会破坏滑块？任何帮助或方向将不胜感激。

谢谢，

德文

Answer 1

你可以发布整个HTML页面吗？我认为这样做是因为jquery函数slideSwitch（）仅用于img标记而不是锚点。所以，如果你，你将poas整个HTML页面，然后我可以尝试。

Answer 2

markupSlider示例代码在关于它应该如何显示的说明中非常具体：http://cssglobe.com/lab/easyslider1.7/js/easySlider1.7.js：

/*
 *  markup example for $("#slider").easySlider();
 *  
 *  <div id="slider">
 *      <ul>
 *          <li><img src="images/01.jpg" alt="" /></li>
 *          <li><img src="images/02.jpg" alt="" /></li>
 *          <li><img src="images/03.jpg" alt="" /></li>
 *          <li><img src="images/04.jpg" alt="" /></li>
 *          <li><img src="images/05.jpg" alt="" /></li>
 *      </ul>
 *  </div>
 *
 */

请尝试按照说明操作。我希望，代码的结构对于使其工作很重要。

添加图像链接打破jquery滑块，请帮助！

2 个答案: