js的小练习（三）

最新推荐文章于 2024-10-19 19:48:37 发布

土豆才不土

最新推荐文章于 2024-10-19 19:48:37 发布

阅读量61

点赞数 1

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/qq_45256777/article/details/119918405

版权

1.自移动的方块，永远出不去屏幕

<!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>
    <style>
        #container{
            width: 100px;
            height: 100px;
            background-color: #008c8c;

            position:absolute;
            top: 0;
            left: 0;
        }
        button{
            position: absolute;
            top: 100px;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="container">

    </div>
    <button>点击运动</button>
    <script>
        var div = document.getElementById('container');
        var btn = document.getElementsByTagName('button')[0];
        btn.onclick = function(){
            // 点击改变div的left和top属性

            var x =7;
            var y = 7;

            // 获取div的初始位置，获取元素距离页面的距离  offsetTop offsetLeft
            var left = div.offsetLeft;
            var top = div.offsetTop;

            setInterval(function(){
                // 改变left和top
                left += x;
                top += y;

                  // 往上走
                if(top + div.offsetHeight >=window.innerHeight){   
                    top  = window.innerHeight -div.offsetWidth;
                    y = -y;
                }
                if(left + div.offsetWidth >= window.innerWidth){
                    left  = window.innerWidth - div.offsetHeight;
                    x = -x;
                }
                
                if(top <= 0){
                    top = 0;
                    y = -y;
                }
                if(left <= 0){
                    left = 0;
                    x = -x;
                }
                div.style.left = left + 'px';
                div.style.top = top + 'px';
            },60)
        }
    </script>
</body>
</html>

2.轮播图

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px;
            width: 100px;
            display: flex;
            justify-content: space-between;
        }

        ul li {
            list-style: none;
            width: 10px;
            height: 10px;
            border: 1px solid #000;
            border-radius: 50%;
            z-index: 1;
        }

        .pic-box {
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 0px auto;
            position: relative;
        }

        button {
            outline: none;
            border: 1px solid #000;
            position: absolute;
            width: 50px;
            height: 60px;
            background-color: #ccc;
            font-size: 25px;
            top: 45%;
        }

        button:active {
            border: 2px solid #000;
        }

        #right-btn {
            right: 0;
        }

        img {
            width: 600px;
            height: 400px;
        }

        .bgc {
            background-color: #008c8c;
        }
    </style>
</head>

<body>
    <div class="pic-box">
        <div class="pic">
            <img src="1.webp" alt="" class="show">
        </div>
        <ul>
            <li class="bgc"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button id="left-btn">&lt;</button>
        <button id="right-btn">&gt;</button>
    </div>

    <script>
        var img = document.querySelector('.pic img');
        var div = document.getElementsByTagName('div')[0];
        var left = document.getElementsByTagName('button')[0];
        var right = document.getElementsByTagName('button')[1];
        var arr = ['1.webp','2.webp','3.webp','4.webp','5.webp'];
        var lis = document.getElementsByTagName('li');

        // console.log(right);
        var i = 0;
        // 讲解
        var timer = null;
        function autoPlay(){
             timer = setInterval(function(){
            i++;
            if(i === arr.length){
                i=0;
            }
            img.src = arr[i];
            for(var j=0;j<lis.length;j++){
                    lis[j].classList.remove('bgc');
                }
                lis[i].classList.add('bgc');
        },1000)
        }
        

        // 点击
        left.onclick = function(){
            i--;
            if(i === -1){
                i = arr.length - 1;
            }
            img.src = arr[i];
            for(var j=0;j<lis.length;j++){
                    lis[j].classList.remove('bgc');
                }
                lis[i].classList.add('bgc');
        }
        right.onclick = function(){
            i++;
            if(i == arr.length){
                i = 0;
            }
            img.src = arr[i];
            for(var j=0;j<lis.length;j++){
                    lis[j].classList.remove('bgc');
                }
                lis[i].classList.add('bgc');
        }
        div.onmouseenter = function(){
            clearInterval(timer);
        }
        // 移出继续轮播
        div.onmouseleave = function () {
            autoPlay();
        }
        

        

        // 小圆点切换
        // 给每个li绑定点击换图事件
        var ul = document.getElementsByTagName('ul')[0];
        for(var j = 0;j<arr.length;j++){
            lis[j].dataset.index = j;
        }
        ul.onclick = function(e) {
            // 圆点变色
            if (e.target.nodeName == 'LI') {
                img.src = arr[e.target.dataset.index];
                for (var p = 0; p < arr.length; p++) {
                    lis[p].classList.remove('bgc');
                }
                e.target.classList.add('bgc');
                i = +e.target.dataset.index;
                }
            }

        // 自动轮播
        // 执行自动轮播
        autoPlay();
        console.log(timer);


      
    </script>
</body>

</html>