Question

以下代码：

<ul>
   <li>
     <div>
       <h2>Surveys</h2>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
         <p class="more"><a href="#" title="XXXXX>XXXXX</a></p>
     </div>
   </li>
</ul>

$('.tabs ul')
  .after('<div class="nav">')
     .cycle({
       cleartypeNoBg:true,
       timeout:10000,
       speed:350,
       pause:1,
       pager:'.tabs .nav',
       pagerAnchorBuilder:function(idx,slide){
       return'<a href="#">'+$(slide).find('.more a').attr('title')+'</a>';
   }
});

在Chrome，Firefox和IE9中运行良好，但在IE8及更低版本中，我得到两倍的标签，其中一半说“未定义”。如果我移动锚点以使其包裹所有内容（即在<li>内），那么IE8会显示正确的选项卡，但这并不适用于我正在尝试完成的任务。

有没有办法让我在IE8中使用我目前的标记？

Answer 1

我在整个pageanchorbuilder事情上遇到了问题，这是基本做任何想象力的方法。它还会强制您使用列表，我认为这些列表是您遇到问题的地方（IE8和列表==麻烦！）。这是我发现更好的工作。

首先像这样构建你的Cycle阶段和拇指托盘。您现在可以完全控制格式！

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

然后使用此JS将缩略图链接到幻灯片。基本上，拇指1链接到幻灯片1，依此类推。

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

这也适用于页面上的多个Cycle画廊。我想会解决你的问题。

与IE8及更低版本的jQuery Cycle pagerAnchorBuilder问题

1 个答案: