0

右側のサイドバーにボタン リンクを含むコンテンツ div を作成しようとしています。ユーザーがどのボタンにもカーソルを合わせていない場合、コンテンツは 5 つのボタン トピックのそれぞれを循環する必要があります (私はこれを達成しました)。また、ユーザーが特定のボタンにカーソルを合わせると、a) ローテーションが停止し、b) そのボタンに関連するコンテンツ トピックのみが表示されます。

現在、私ができることは、(Javascript 関数を使用して) トピックを回転させ、(HTML で) ホバー時にコンテンツを表示および非表示にすることだけです。助けてください？

<script>
function rotatecontent(){
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
futcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex+1
messages[prevcontentindex].style.display="none"
messages[curcontentindex].style.display="block"
messages[futcontentindex].style.display="none"
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 1000)
}
}

$('#container li').hover(function() {
    clearInterval(interval);
}, function() {
    interval = setInterval("rotatecontent()", 1000);
});

</script>

HTML:

 <body>


 <ul id="container">

 <li><a href="#">
 <img src="image1.jpg" width="250" height="100" class="Bab-
 image"></a></li>


 <li><a href="#"><img src="image2.jpg" class="sluotr-image 
 </a></li>

 <li><a href="#"><img src="image3.jpg" 
 class="blogs-image"></a></li>

 <li><a href="#"><img src="image4.jpg" class="chat-
 image"></a></li>

 <li><a href="#"><img src="image5.jpg" 
 class="view-image"></a>
 </li>

 </ul>

 <div class="dyncontent">
 <div id="div1">Content 1</div>
 <div id="div2" style="display:none">Content 2</div>
 <div id="div3" style="display:none">Content 3</div>
 <div id="div4" style="display:none">Content 4</div>
 <div id="div5" style="display:none">Content 5</div>
 </div>
 </body>
 </html>
4

3 に答える 3

0

ハイパーリンクの1つにカーソルを合わせるまでjsfiddleが回転し、離れると再開します：http: //jsfiddle.net/58pms/11/（更新されたjsfiddle、元の回転は1回転のみ）

サンプルから欠落している変数宣言とHTMLをいくつか追加する必要があったため、元のコードの何が問題になっているのかを判断するのは難しいと思います。また、それがあなたの主な質問ではないと思うので、簡単にするために、あなたがホバーしているアイテムを表示するイベントハンドラーを取り出しました。

HTML：

<ul id="container" overflow:hidden>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>
<div class="dyncontent">
<div id="div1">Be A Billiken</div>
<div id="div2" style="display:none">Be A Billiken 2</div>
<div id="div3" style="display:none">Be A Billiken 3</div>
<div id="div4" style="display:none">Be A Billiken 4</div>
<div id="div5" style="display:none">Be A Billiken 5</div>
</div>

そしてスクリプト：

var messages;
var curcontentindex = 0;
var prevcontentindex;
var futcontentindex;
var i;

function rotatecontent() {
    messages.hide();
    curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0;
    messages.get(curcontentindex).style.display = "block";
}


$(function() {
    messages = $('.dyncontent').find('div');
    i = setInterval(rotatecontent, 1000);


    $('#container li').hover(function() {
        clearInterval(i);
    }, function() {
        i = setInterval(rotatecontent, 1000);
    });
});
于 2012-07-26T18:39:41.017 に答える
0

intervalの外側で変数を宣言して変数にするだけwindow.onload functionですglobal（そのため、他の関数からアクセスできます）。

var interval=0;
window.onload=function(){
    // other code goes here
    interval=setInterval(rotatecontent, 1000); // use the variable here
}

または、次のように全体的な変更を加えます

<script type="text/javascript">
    function rotatecontent(){ 
        // Your function's code here 
    }

    $(document).ready(function(){
        var interval=setInterval(rotatecontent, 1000);

        $('#container li img').hover(function() {
            clearInterval(interval);
        }, function() {
            interval = setInterval(rotatecontent, 1000);
        });
    }​);
</script>
于 2012-07-26T18:26:40.343 に答える
-1

すでに jQuery を使用している場合は、window.onload を使用しないでください。使用する

$(function() { } );

代わりは。

于 2012-07-26T18:10:28.690 に答える