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)


相关推荐

  • 带通滤波器的设计[通俗易懂]

    带通滤波器的设计[通俗易懂]一、滤波器:滤波器按照频带划分可以分为:低通滤波器(LPF)、高通滤波器(HPF)、带通滤波器(BPF)、带阻滤波器(BEF)。其中射频天线领域主要采用带通滤波器(BPF)。二、带通滤波器(BPF):①:RFBPF:从天线中取出期望频带的有效信号,滤除不需要频带的电磁波信号和噪声。②:RFBPF:用下级混频器(降频混频器)进行频率转换时,防止在IF频带中引入干扰信号,用BP…

  • PHP开发APP接口实现–基本篇

    PHP开发APP接口实现–基本篇

  • Java学习之爬虫篇

    Java学习之爬虫篇0x00前言总结完基础阶段,来写个爬虫练练手,从中能学到不少。0x01爬虫结构与概念爬虫更官方点的名字叫数据采集,英文一般称作spider,就是通过编程来全自动的从互联

    2021年12月12日
  • TFS 2010 让安装更简单,也让VSS成为历史「建议收藏」

    TFS 2010 让安装更简单,也让VSS成为历史「建议收藏」      一转眼VS2010RC(ReleaseCandidate)版本已经发布一月多了,RTM(ReleaseToManufacturer)版本也快妥了,已经进入了最后的倒计时,只等4月12号发布了。TFS2010也将一起正式发布,相对于2005和2008,2010将是具有里程碑意义的一个版本,就像它总设计师BrianHarry在下面的Channel9采访中所描述的:“T

  • QIIME 2教程. 01简介和安装 Introduction & Install(2020.11)

    QIIME 2教程. 01简介和安装 Introduction & Install(2020.11)QIIME2https://qiime2.org/简介QIIME2是微生物组分析软件QIIME(截止17.7.13被引7771次)的全新版(不是升级版),全部python3全新编写,并于明年全面接替QIIME,是代表末来的分析方法标准(大牛们制定方法标准,我们跟着用就好了)。优点更易于安装:QIIME1的安装让无数生信人竞折腰,现在官方发布了docker,下载即可运行;使用方法多样:支持命令

  • vue项目管理_vue适合做管理系统吗

    vue项目管理_vue适合做管理系统吗口述vue后台管理系统流程(面试可用)后台页面的权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能我们前端所要做的是:不同的权限对应着不同的路由,同时侧边栏也需要根据不同的权限,异步生成.技术栈主要有:vue,vue-router,vuex,axios,vue-cli3.x(没有webpack.config.js配置文件,取而代之的是vue.c…

发表回复

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

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