自動アコーディオン

Question

私はアコーデオンのメニューを自動的に循環させようとしており、私が見つけたすべてのことは指示については非常に曖昧です。サイクル・プラグインを使用してサイクル・スルーを行うことができたとの回答が2つ見つかりました。これが私の試みです。私はサイクル機能を正しく動作させることができません。私はそれについて正しいことをやろうとしているのですか？私のコードで何を忘れてしまったのでしょうか？

私は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()の間に再び設定されます。リファクタリングできる混乱する部分は、モジュラス演算を持つカウンタを使用してイメージを循環させる方法です。各<a>にIDを追加して、最後に番号を増分変更しています。

ここをクリックしてください：http://jsfiddle.net/Ck3aZ/