Question

互联网上有很多免费的幻灯片和插件。我想用纯javascript设计我的幻灯片，没有任何框架或插件。我想要一个简单的幻灯片放映，重量轻，负载快。我有一些问题。请帮助我发酵。我不想在图像中保存图像的名称。问题是：

javascript事件不适用于大多数浏览器，例如 onmouseout和onmouseover。
我想在鼠标时停止滑动移动元素，当鼠标移出元素幻灯片时再次自动播放。但是在此幻灯片中，当鼠标移过div#slider-display时，幻灯片显示不会停止，当鼠标移出时，幻灯片播放速度比以前快！为什么？！

3.如何将其更改为仅使用javascript而不使用jquery？ 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>

幻灯片放映中的setInterval

0 个答案: