用html+css+js制作幻灯片显示_js和html写网站幻灯-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39450599/article/details/90339948

本文介绍如何使用setTimeout创建幻灯片动画效果。网页加载后自动播放，鼠标悬停显示控制箭头并暂停，移开后继续播放。点击左右箭头或底部点状指示器可切换幻灯片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用setTimeout制作幻灯片动画。装载网页后自动播放幻灯片。
当mouseover图片时，显示左右箭头，并停止动画。当mouseout画面时，隐藏左右箭头，重新启动动画。
每次点击左箭头将移动一副图像。

右下角的三个点每个点对应一幅图像，当前图像的变化时所对应的点也会变化。点击它们时会显示对应的图像。

<!DOCTYPE html>   

<html>   

<head>   

<title>Slider</title>   

<style>   

    #indexline{   

        width:650px;   

        margin: 0 auto;   

        position: relative;   

        overflow:hidden;   

    }   

    #content_main{   

        width: 2600px;   

        white-space:nowrap;   

        position: relative;   

        overflow:hidden;   

    }   

    #arrowsleft{   

        background: url("images/arrows-30.png")repeat-y;   

        height:80px;   

        width: 33px;   

        top:80px;   

        left:50px;   

        position: absolute;   

        overflow:hidden;   

        z-index: 2;   

    }   

    #arrowsright{   

        background: url("images/arrows-30.png")repeat-y;   

        background-position:-32px -80px;   

        height:80px;   

        width: 33px;   

        position: absolute;   

        top:80px;   

        right:50px;   

        overflow:hidden;   

        z-index: 2;   

    }   

    #img1,#img2,#img3{   

        width: 650px;   

        float: left;   

    }   

    .pointred1 {   

        background:url("images/navigator.png");   

        background-position:-12px -24px;   

        top:230px;   

        left:600px;   

        height:12px;   

        width:12px;   

        overflow:hidden;   

        position:absolute;   

        z-index: 4;   

    }   

    .pointred2 {   

        background:url("images/navigator.png");   

        background-position:-12px -24px;   

        top:230px;   

        left:615px;   

        height:12px;   

        width:12px;   

        overflow:hidden;   

        position:absolute;   

        z-index: 4;   

    }   

    .pointred3 {