JS简单实现图片上一张下一张操作

简单实现了js的图片上一张下一张效果,没怎么做css美化单纯就是想记录一下js部分。效果图:嘿嘿,wuli爽妹子镇图!! <!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>幻灯片</title&

大家好,又见面了,我是你们的朋友全栈君。

简单实现了js的图片上一张下一张效果,没怎么做css美化单纯就是想记录一下js部分。

效果图:嘿嘿,wuli爽妹子镇图!!

JS简单实现图片上一张下一张操作

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>幻灯片</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    #picBox{
        margin:100px auto;
        width:600px;
        height:400px;
    }
    #pic{
        width:600px;
        height:400px;

    }
    #buttonBox{
        width:150px;
        margin:10px auto;
    }
</style>
<body>
<div id="picBox">
  <img src="s1.jpg" id="pic">
  <div id="buttonBox">
    <input type="button" value="上一张" onclick="pre();">
    <input type="button" value="下一张" onclick="next();">
  </div>
</div>
<script>
    var picArr=new Array("s1.jpg","s2.jpg","s3.jpg","s4.jpg");
    var index=0;
    function next(){
        index++;
        if(index==picArr.length){
            index=0;
        }
        document.getElementById("pic").src=picArr[index];
    }
    function pre(){
        index--;
        if(index<0){
            index=picArr.length-1;
        }
        document.getElementById("pic").src=picArr[index];
    }
</script>
</body>
</html>

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125567.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • dual channel ddr3主板_ddr3 std

    dual channel ddr3主板_ddr3 std第一次看到ODT这个东西,真是一头雾水;然后是TerminationRank,FAE解释了几次,也没明白。究其原因,这玩意儿和硬件太相关,而不是纯粹软件的TRUEorFALSE。好歹也是通信工程毕业,号称软硬通吃,怎能被轻易难倒?ODT,全称OnDieTermination。我们先说Termination的概念。一个DDR通道,通常会挂接多个Rank,这些Rank的数

  • linux抓本来端口包,Linux抓包

    linux抓本来端口包,Linux抓包tcpdump-ieth1-nn‘dsthost172.31.0.42‘-w/tmp/temp.cap监听指定的主机$tcpdump-ieth0-nn‘host192.168.1.231‘这样的话,192.168.1.231这台主机接收到的包和发送的包都会被抓取。$tcpdump-ieth0-nn‘srchost192.168.1.231‘这样只有192….

    2022年10月15日
  • 别人的收藏_自己的qq收藏别人是否能看到

    别人的收藏_自己的qq收藏别人是否能看到0DAY 0daydivxz数据库0dayGamezHowtotellNFOrceEntertainmentTLF0DayCheckIndexTLF资讯网UGiA0daysearchengine_2002-2005梦幻0Day~game阿拉下载龙族-北京站-MCSYSTEM2004 BBS  下载论坛

  • android 反射NoSuchMethodException异常

    android 反射NoSuchMethodException异常android反射NoSuchMethodException异常因为方法的参数是int类型,使用反射调用时使用Integer类型的参数。应该使用getDeclaredMethod(“****”,int.class);

  • docker疑难杂症:docker命令Tab无法自动补全[通俗易懂]

    docker疑难杂症:docker命令Tab无法自动补全[通俗易懂]今天在敲命令时,发现docker无法自动补全镜像名和其他参数,这样使用效率大大降低,然后百度找方法,下面是解决方法一、安装bash-completeyuminstall-ybash-completion二、刷新文件source/usr/share/bash-completion/completions/dockersource/usr/share/bash-completio…

  • 一个Web前端自学者的自述「建议收藏」

    一个Web前端自学者的自述「建议收藏」想来想去还是写下这篇文章,先说明,我精通JAVA编程语言和web前端常见的技术,个人是做JAVA的多,但是更加喜欢前端。因为我从高一开始接触JAVA,家父是黑马的JAVA讲师,自己对编程很热爱,在大学

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号