0

インターネットには多くの無料のスライド ショーとプラグインがあります。フレームワークやプラグインを使用せずに、純粋な JavaScript でスライド ショーをデザインしたいと考えています。軽量で読み込みが速いシンプルなスライド ショーが必要です。私はそれでいくつかの問題を抱えています.ferindsを助けてください. 画像の名前を配列に保存したくありません。問題は次のとおりです。

  1. JavaScript イベントは、ほとんどのブラウザー (例: onmouseoutおよびonmouseover.

  2. マウスが要素の上に移動したとき、およびマウスが要素の外に移動したときにスライドの自動再生を再度停止したいのですが、このスライドショーでは、マウスが要素の上に移動したときdiv#slider-displayにスライドショーが停止せず、マウスが外に移動したときにスライドショーが以前よりも速く再生されます！どうして？！

3.jquery なしで javascript のみを使用するように変更するにはどうすればよいですか? js ファイル:

var imageul=document.getElementById("slider-gallery");
var images=imageul.getElementsByTagName("img");
var imageIndex = 0;
function changeImage() {
    imageIndex++;
    if (imageIndex >= images.length) {
        imageIndex = 0;
    }
    $("#slider-display").empty();
    var mainImage=document.createElement("img");
    mainImage.setAttribute("src",images[imageIndex].getAttribute("src"));
    document.getElementById('slider-display').appendChild(mainImage);
}
var intervalHandle = setInterval(changeImage,2000);
/*document.getElementById('slider-display').onmouseout =  function() {
    var intervalHandle = setInterval(changeImage,2000);
};
document.getElementById('slider-display').onmouseover =  function() {
    clearInterval(intervalHandle);
};*/
$("#slider-display").mouseout(function(){
    var intervalHandle = setInterval(changeImage,2000);
});
$("#slider-display").hover(function(){
    clearInterval(intervalHandle);
});

html ファイル:

<div id="slider">
    <div id="slider-display"> </div>

    <div id="slider-gallery" style="display:none;">
        <img src="img/1.jpg" />
         <img src="img/2.jpg" />
        <img src="img/3.jpg" />
    </div>

    <div id="slider-buttons">
        <img id="slider-btn-prev" src="img/media_skip_backward.png" /> 
        <img id="slider-btn-next" src="img/media_skip_forward.png" />
    </div>

</div>
4

0 に答える 0