自动手风琴

Question

我正在尝试使手风琴菜单自动循环显示，而我不断发现的所有内容对于说明都非常模糊。我找到了几个答案，说我可以使用循环插件来循环，所以这就是我所尝试的。但我无法让循​​环功能正常工作。我的处理方式是否正确？如果是，我的代码中遗漏了什么？

我对 jQuery 很陌生，所以这一切对我来说有点不知所措。谢谢。

<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 380;
minWidth = 50;  

$("#slide ul li a").hover(
  function(){
    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
  }
);
});
 $(function() {
$('#slide').cycle({ 
  fx:     'slideY', 
  easing: 'bounceout', 
  delay:  -4000 
});
});
  </script>

<div id="slide" class="cycle">
<ul>
  <li>
    <a id="a1">
      <img src="image" />
    </a>
  </li>
  <li>
    <a>
       <img src="image" />
    </a>
  </li>
  <li>
    <a>
      <img src="image" />
    </a>
  </li>
  <li>
    <a>
      <img src="image" />
    </a>
  </li>
</ul>
</div>

Answer 1

所以我不确定这是否正是您正在寻找的，但我编写了一个快速解决方案，希望可以帮助您找到解决方案：

HTML

<div id="slide" class="cycle">
    <ul>
        <li>
            <a id="a1">
                <img src="image" />
            </a>
        </li>
        <li>
            <a id="a2">
                <img src="image" />
            </a>
        </li>
        <li>
            <a id="a3">
                <img src="image" />
            </a>
        </li>
        <li>
            <a id="a4">
                <img src="image" />
            </a>
        </li>
    </ul>
</div>

jQuery

var lastBlock = $("#a1");
var maxWidth = 166;
var minWidth = 35;
var counter = 0;
var myInterval = 0;

$("#slide ul li a").mouseenter(

function() {
    $(lastBlock).animate({
        width: minWidth + "px"
    }, {
        queue: false,
        duration: 400
    });
    $(this).animate({
        width: maxWidth + "px"
    }, {
        queue: false,
        duration: 400
    });
    lastBlock = this;
    clearInterval(myInterval);
}).mouseleave(function() {
    myInterval = setInterval(doSomething, 4000);
});

function doSomething() {
    var i = counter++ % 4 + 1;
    $("#a" + i).trigger("mouseenter");
    $("#a" + i).trigger("mouseleave");
}

myInterval = setInterval(doSomething, 4000);

所以在这个解决方案是设置一个时间间隔来循环触发 mouseenter() 和 mouseleave() 事件。由于您可能不希望鼠标悬停在某个元素上时图像循环，因此在 mouseenter() 上清除间隔，并在 mouseleave() 期间再次设置。一个可以重构的令人困惑的部分是它使用带有模数运算的计数器循环图像的方式。请注意，我向每个 添加了一个 ID，并对末尾的数字进行了增量更改。

在这里查看它的工作原理： http://jsfiddle.net/Ck3aZ/