js图片切换功能

最新推荐文章于 2024-08-18 10:54:05 发布

TomKing9

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量89

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/TomKing9/article/details/113664261

版权

HTML CSS JavaScript 图片轮播事件处理

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            width: 1000px;
            background-color: bisque;
            margin: 20px auto;
        }
        #photo{
            width: 100%;
        }
        ul{
            width: 100%;
            margin: 0 auto;
            text-align: center; /*文本水平中置标签*/
        }
    
    </style>
</head>
<body>
    <script>
        window.onload=function(){
            let prev=document.getElementById('prev');
            let next=document.getElementById('next');
            let photo=document.getElementById('photo');
            let index=0; 
            let photoArr=["./photo/01.jpg","photo/02.jpg","photo/03.jpg","photo/04.jpg","photo/05.jpg"];
            var info=document.getElementById("info");
            console.log(photoArr[0]);
            prev.onclick=function(){
                index--;        //变量在函数中的作用域就在此函数中，出了函数变量值会归零
                if(index<0){
                    index=photoArr.length-1;
                }
                photo.src=photoArr[index];
            }
            next.onclick=function(){
                index++;
                if(index>photoArr.length){
                    index=0;
                }
                photo.src=photoArr[index];
                console.log(index);
            }
            info.innerHTML="一共"+photoArr.length+"张，现在是第"+(1+index)+"张";
            console.log(index);

        }
    </script>
    <div>
        <li>
            <ul>
                <button id="prev">上一张</button>
            </ul>
            <ul>
                <button id="next">下一张</button>
            </ul>
            <ul>
                <img id="photo" src="./photo/01.jpg" alt="van gogh">
            </ul>
            <ul>
                <p id="info"></p>
            </ul>
        </li>

    </div>
</body>
</html>

TomKing9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片切换功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ma.
复制链接

扫一扫