javascript - JQuery Cleanup 并自动选择下一个 div 和导航项

Question

我的第一个问题是:我有 5 张图像，单击时显示相关的 div 并隐藏其余的。这就是我的编码方式，我只是觉得这是一种困惑而冗长的编码方式。刚接触 jQuery 我只是想征求你的建议。这是我的代码:

$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

$('#nav-fragment-0').fadeTo("slow", 1);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

$("#nav-fragment-0").click(function() {
    $('#fragment-0').show();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();


    $('#nav-fragment-0').fadeTo("slow", 1);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);


    });
$("#nav-fragment-1").click(function() {
    $('#fragment-1').show();
    $('#fragment-0').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-1').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-2").click(function() {
    $('#fragment-2').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-3').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-2').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-3").click(function() {
    $('#fragment-3').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-4').hide();

    $('#nav-fragment-3').fadeTo("slow", 1);

    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-4').fadeTo("slow", 0.33);

    })
$("#nav-fragment-4").click(function() {
    $('#fragment-4').show();
    $('#fragment-0').hide();
    $('#fragment-1').hide();
    $('#fragment-2').hide();
    $('#fragment-3').hide();

    $('#nav-fragment-4').fadeTo("slow", 1);
    $('#nav-fragment-0').fadeTo("slow", 0.33);
    $('#nav-fragment-1').fadeTo("slow", 0.33);
    $('#nav-fragment-2').fadeTo("slow", 0.33);
    $('#nav-fragment-3').fadeTo("slow", 0.33);

    })


});

这是包含单击的导航图像的 UL

<ul class="ui-tabs-nav ui-tabs ui-widget ui-widget-content ui-corner-all">
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/08/16-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-0" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/05/1-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-1" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/06/P6172474-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-2" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2011/12/Florence.out_-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-3" ></a></li>
  <li class="ui-tabs-nav-item ui-tabs-selected"><a><img src="2013/08/11-150x112.jpg" alt="" width="90" height="57" id="nav-fragment-4" ></a></li>
</ul>

这是 div:

<div id="fragment-0" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"></div>

第二个问题是，如何让这些在 10 秒后快速浏览，然后不断循环播放？

Answer 1

根据您的 html，您可以执行以下操作:

1. 对所有导航片段使用相同的类:.nav-fragments

2. 将所有 .nav 片段绑定(bind)到以下内容: http://jsfiddle.net/hxU4G/

$(this).fadeTo("slow", 1);

$(this).siblings(".nav-fragment").fadeTo("slow", 0.33);