学了一点定时器后，给我的女神jisoo做了个简单的网页来循环播放女神的照片。

码界索隆

已于 2022-03-09 23:27:45 修改

阅读量189

点赞数

文章标签： html css3 css

于 2022-03-09 23:24:16 首次发布

本文链接：https://blog.csdn.net/cool66boy/article/details/123387702

版权

文章目录

女神美图循环播放的简单网页
- html代码

女神美图循环播放的简单网页

功能陈述：

图片会自动循环播放。
点击向左向右可以改变图片循环播放的方向。
鼠标移到图片上，会暂停播放，移开后继续原方向循环播放。

效果图：

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3233091_vbj8k8jhtk.css">
    <style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        h1{
            text-align: center;
            color: pink;
        }
        #box{
            position: fixed;
            overflow: hidden;
            width: 400px;
            height: 500px;
            box-sizing: content-box;
            border: 20px solid pink;
            border-radius: 5px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        .iconfont{
            color: pink;
            font-size: 50px;
            font-weight: bold;
        }

        .icon-xiangyou1{
            position: fixed;
            top: 350px;
            right: 490px;

        }

        .icon-xiangzuo1{
            position: fixed;
            top: 350px;
            left: 490px;
        }

        #container{
            position: absolute;
            width: 3200px;
        }

        img{
            float: left;
            width: 400px;
        }
    </style>
    <script>
        window.onload = function(){
            var sContainer = document.getElementById('container');
            var sLeft_move = document.getElementById('left_move');
            var sRight_move = document.getElementById('right_move');
            var left_num = 0;
            var preSpeed = 0;
            //控制速度，巧妙的一步
            var Speed = 1;
            //关键步骤之一，用来实现无缝滚动；
            sContainer.innerHTML = sContainer.innerHTML + sContainer.innerHTML;
            //循环播放定时器
            var img_move = setInterval(function(){
                left_num -= Speed;
                if(left_num < -1600){
                    left_num = 0;//向左循环播放到最后一张图片后，迅速拉回到第一张图片；
                }
                else if(left_num>0){
                    left_num = -1600;//向右循环播放到第一张图片后，迅速拉回到最后一张图片；
                }
                //改变left值实现动画；
                sContainer.style.left = left_num + 'px';
            },15)
            //向左按钮点击事件
            sLeft_move.onclick = function(){
                Speed = 1;
            }
            //点击向右按钮的事件
            sRight_move.onclick = function(){
                Speed = -1;
            }
            //鼠标移到图片上事件
            sContainer.onmouseover =function(){
                preSpeed = Speed;
                Speed = 0;
            }
            // 鼠标移出图片事件
            sContainer.onmouseout =function(){
                Speed = preSpeed;
            }
            //用于关闭定时器
            // clearInterval(img_move);
        }
    </script>
</head>
<body>
    <h1>最美女神jisoo</h1>
    <i class="iconfont icon-xiangzuo1" id="left_move"></i>
    <div id="box">
        <div id="container" class="clearfix">
            <img src="./img/img1.jpg" alt="">
            <img src="./img/img2.jpg" alt="">
            <img src="./img/img3.jpg" alt="">
            <img src="./img/img4.jpg" alt="">
        </div>
    </div>
    <i class="iconfont icon-xiangyou1" id="right_move"></i>
</body>
</html>

码界索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学了一点定时器后，给我的女神jisoo做了个简单的网页来循环播放女神的照片。

文章目录女神美图循环播放的简单网页html代码女神美图循环播放的简单网页功能陈述：图片会自动循环播放。点击向左向右可以改变图片循环播放的方向。鼠标移到图片上，会暂停播放，移开后继续原方向循环播放。效果图：html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
复制链接

扫一扫