图片上一张与下一张切换

最新推荐文章于 2024-01-09 15:24:11 发布

那支歌

最新推荐文章于 2024-01-09 15:24:11 发布

阅读量4.7k

点赞数 1

分类专栏： JS技术文章标签：图片切换-+ 图片

本文链接：https://blog.csdn.net/u014488318/article/details/48374347

版权

JS技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>图片幻灯片切换</title>
</head>
<body>
    <img src="images/001.jpg" id="imgid"><br/>
    <input type="button" value="上一张" id="prev">
    <input type="button" value="下一张" id="next">

<script>
    var adimg=['images/001.jpg','images/002.jpg','images/003.jpg'];
    var numimg=0;
    window.onload=function(){
        document.getElementById('prev').onclick=prevProcess;
        document.getElementById('next').onclick=nextProcess;
    }
    function prevProcess(){
        if(numimg==0){
            numimg=adimg.length;
        }
        numimg--;
        document.getElementById('imgid').src=adimg[numimg];
        return false;
    }
    function nextProcess(){
        numimg++;
        if(numimg==adimg.length){
            numimg=0;
        }

        document.getElementById('imgid').src=adimg[numimg];
        return false;
    }
</script>
</body>
</html>

那支歌

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片上一张与下一张切换

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>图片幻灯片切换</title></head><body> <img src="images/001.jpg" id="imgid"><br/> <input type="button" value="上一张" id="p
复制链接

扫一扫