用html+css+js制作幻灯片显示

最新推荐文章于 2024-03-14 11:43:34 发布

zhanghj46

最新推荐文章于 2024-03-14 11:43:34 发布

阅读量3.2k

点赞数 3

本文链接：https://blog.csdn.net/weixin_39450599/article/details/90339948

版权

用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 {

最低0.47元/天解锁文章

zhanghj46

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
用html+css+js制作幻灯片显示

用setTimeout制作幻灯片动画。装载网页后自动播放幻灯片。当mouseover图片时，显示左右箭头，并停止动画。当mouseout画面时，隐藏左右箭头，重新启动动画。每次点击左箭头将移动一副图像。右下角的三个点每个点对应一幅图像，当前图像的变化时所对应的点也会变化。点击它们时会显示对应的图像。 <!DOCTYPE html> <html> ...
复制链接

扫一扫