js简单实现切换图片上一张下一张功能是什么_js中图片切换效果怎么实现

js简单实现切换图片上一张下一张功能是什么_js中图片切换效果怎么实现<!DOCTYPEhtml><html><headlang=”en”><metacharset=”UTF-8″><title>照片点击切换</title></head><style>*{margin:0;padding:0;}#picBox{margin:100pxauto;.


<!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="1.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("1.jpg","2.jpg","3.jpg","4.jpg","5.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>

在这里插入图片描述

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/213396.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • SheetJS中文文档-js导出Excel脚本库[通俗易懂]

    SheetJS中文文档-js导出Excel脚本库[通俗易懂]转载自GITHUB用户rockboom的翻译文档SheetJs下载:GITHUB地址|CSDN下载地址SheetJSjs-xlsxSheetJS是用于多种电子表格格式的解析器和编写器。通过官方规范、相关文档以及测试文件实现简洁的JS方法。SheetJS强调解析和编写的稳健,其跨格式的特点和统一的JS规范兼容,并且ES3/ES5浏览器向后兼容IE6。目前这个是社区版,我们也提供了性能增强的专业版,专业版提供样式和专业支持的附加功能。

    2022年5月6日
  • dex文件介绍

    dex文件介绍搭建环境Ubuntu18.04.1LTSandroid-ndk-r17-beta2FFmpeg4.0.2编译FFmpeg修改configure配置编译脚本报错调整错误1:错误2:错误3:错误4:错误5:搭建环境Ubuntu18.04.1LTS需要安装yasm:sudoapt-getinstallyasmand…

    2022年6月27日
  • [黑苹果系列] M910x完美黑苹果系统安装教程 – 2 制作系统U盘-USB Creation

    [黑苹果系列] M910x完美黑苹果系统安装教程 – 2 制作系统U盘-USB Creation目前主流的苹果系统的安装方法有两种:1.U盘安装2.Windows下使用镜像恢复软件安装的方式目前,U盘安装是主流选择,这样安装调试好的黑苹果macOS问题最少,也较为稳定。之前的文章由于采用的是镜像恢复的方法,此次安装采取U盘安装系统的方式,因此重新写一篇。1.前期准备U盘一个,大于16G 安装工具软件包 镜像文件 制作合适的EFI文件 需要准备40GB以上独立固态硬盘空间2.下载macOs镜像3.制作安装U盘可以用TransMac或者balenaEt.

    2022年6月9日
  • APUE学习笔记——10.15 sigsetjmp和siglongjmp[通俗易懂]

    APUE学习笔记——10.15 sigsetjmp和siglongjmp

    2022年1月26日
  • Oracle数据库存储number类型数据「建议收藏」

    Oracle数据库存储number类型数据「建议收藏」转载自初一七月Oracle数据类型之numberoracle的number类型是oracle的内置类型之一,是oracle的最基础数值数据类型。在9iR2及其以前的版本中只支持一种适合存储数值数据的固有数据类型,在10g以后,才出现了两种新的数值类型,即推出本地浮点数据类型(NativeFloating-PointDataTypes):BINARY_FLOAT(单精度32位)和BINAR…

    2022年7月24日
  • 大白菜运行ghost备份恢复工具_大白菜备份的系统被隐藏了

    大白菜运行ghost备份恢复工具_大白菜备份的系统被隐藏了不是经常换系统,容易换机,简单记录下先在u盘做一个系统,我用的大白菜电脑启动的时候进入u盘系统根据自己电脑型号查询如果启动的时候可以选择启动菜单是最方面的,直接通过启动菜单启动u盘系统如果启动的时候没有启动菜单,需要去bios里面调整顺序进入大白菜系统后,我选择的ghost备份还原…

    2022年9月4日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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