Question

我目前正在创建新闻轮播。在左侧面板上，我有每个新闻项目的三个标题，在右边我有一个与该新闻项目相关联的图像，在右下方我有每个项目的三个“导航块”。

在我的示例中，当您单击左侧的链接时，它将在较大的右侧面板中显示相关内容。这也适用于右下角的导航块。如果单击其中一个，相关项将显示在较大的面板中。

我需要做的最后一件事就是自动轮换这些新闻。在加载时，将显示第一项，突出显示“链接1”，并突出显示导航块的“阻止一”。比如说10秒后，“链接2”将突出显示，突出显示“块2”，并显示中间的相关内容。等等，等等。

http://codepen.io/anon/pen/wDiGy - 这是迄今为止的代码笔版本。

下面突出显示的代码：

<div id="title-container">
  <ul>
      <li>
          <a href="#" class="title item" itemID="1">Link 1</a>
      </li>
      <li>
          <a href="#" class="title" itemID="2">Link 2</a>
      </li>
      <li>
          <a href="#" class="title" itemID="3">Link 3</a>
      </li>
  </ul>
 </div>
 <div id="image-container">
   <div class="image1 image" itemID="1">1</div>
   <div class="image2 image" itemID="2">2</div>
   <div class="image3 image" itemID="3">3</div>
   <div id="circular-nav">
    <li><a href="#" class="circle-title" itemID="1"></a></li>
    <li><a href="#" class="circle-title" itemID="2"></a></li>
    <li><a href="#" class="circle-title" itemID="3"></a></li>
 </div>

用于选择每个项目的jQuery

$('.image:first').show();
$('.title, .circle-title').click(function(){
 $('.image').hide();
 var itemID = $(this).attr('itemID');
 $('.image[itemID="' + itemID + '"]').fadeIn('fast');  
});

我将更改HTML以集成到我正在使用的CMS中，但类名不会改变。

非常感谢任何协助。

更新：通过摆弄它，我已经成功地获得了99％的收益。我现在有一个障碍。我正在使用.next（）来覆盖每个项目。如果有三个项目到达终点，你如何回到起点？（PEN更新）

Answer 1

使用setInterval每隔10秒触发切片更改/图像更改功能。

setInterval(function(){
    //Code for changing the tile/image
},10000); //Milliseconds

您可以将现有函数放在变量中，并将其用于单击以及间隔。此外，由于您通过点击传递了一些信息，因此您可以将ID存储在一个数组中，并在所有图像循环完毕后将增量/重置计数器存储起来。

更新

<强> Working Fiddle!

Answer 2

http://jsfiddle.net/hc4py/（只有风格化的链接，而不是项目符号）

setInterval(function () {
var $cur = $('a.active');
var i = $cur.closest('li').index(); //parent 'li' of first active link

$('.image:visible').hide(); //hide visible image

$cur.removeClass('active');

//if active 'a's parent li is the last one
if ($cur.closest('li').is(':last-child')) { 
    $('.image').eq(0).fadeIn('fast'); //show first image
    $cur.closest('ul').find('li:first-child').find('a.title').addClass('active');
} 


else {
    $('.image').eq(i + 1).fadeIn('fast');//show next image
    $cur.closest('li').next().find('a.title').addClass("active");
}
}, 2000);

.title.active{color:red;}

Answer 3

我找到了一个简单的解决方案，它只涉及一个if语句来检查项目的长度。一旦它结束，它就能够正确循环。

setInterval(function () {
  if ($('.image:visible').next().length === 0) {
    $('.image').hide();
    $('.image:first').fadeIn();
  } else {
    $('.image:visible').hide().next().fadeIn('fast');
  }
}, 2000); //Milliseconds

使用jQuery旋转div（隐藏/淡入）

3 个答案: