当前位置：网站首页>原生js系列

原生js系列

2022-07-30 17:52:00 【YingUser】

1、图片的切换

  包含了定时器以及修改属性的属性

<!DOCTYPE html>
<html lang="zh-CN">

<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>图片切换</title>
</head>

<body>
    <img src="./images/1.jpg" alt="" id="flower" width="200" height="200">
    <br>
    <br>

    <button id="preBtn">上一张</button> <button id="nexBtn">下一张</button>

    <script type="text/javascript">
        let flower = document.getElementById('flower')
        let preBtn = document.getElementById('preBtn')
        let nexBtn = document.getElementById("nexBtn")
        let minIndex = 1, maxIndex = 5; currentIndex = minIndex
        // 上一张
        nexBtn.onclick = function () {
            if (currentIndex === maxIndex) {
                currentIndex = minIndex
            } else {
                currentIndex++
            }
            console.log(currentIndex);

            flower.setAttribute('src', `images/${currentIndex}.jpg`)
        }

        // 下一张
        preBtn.onclick = function () {
            if (currentIndex === minIndex) {
                currentIndex = maxIndex
            } else {
                currentIndex--
            }
            console.log(currentIndex);

            flower.setAttribute('src', `images/${currentIndex}.jpg`)
        }

        // 定时器切换
        let timer = setInterval(() => {
            currentIndex++
            if (currentIndex === maxIndex) {
                currentIndex = minIndex
            }
            flower.setAttribute('src', `images/${currentIndex}.jpg`)

        }, 3000)


    </script>
</body>

</html>

2、图片的显示与隐藏

<!DOCTYPE html>
<html lang="zh-CN">
<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>图片的显示和隐藏</title>
</head>
<body>
    <button id="btn">隐藏</button>
    <br>
    <img src="./images/10.jpg" alt="" id="new">
    <script type="text/javascript">
// 1、获取事件源
let oBtn=document.getElementById('btn')
let newImg=document.getElementsByTagName('img')[0]
// let isShow=true    这是另外一种方法，用一个变量控制
// 绑定事件
    oBtn.onclick=function(){
        // 事件驱动程序
        if(oBtn.innerHTML==='隐藏'){
            newImg.style.display = 'none'
            oBtn.innerHTML='显示'
            // isShow=false
        }else{
             newImg.style.display = 'block'
            oBtn.innerHTML = '隐藏'
            // isShow = true
        }
       
    }
    </script>
</body>
</html>

原网站

版权声明
本文为[YingUser]所创，转载请带上原文链接，感谢
https://blog.csdn.net/YingUser/article/details/125994836

边栏推荐

猜你喜欢

随机推荐