0

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

  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