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

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定


<!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>

Jetbrains全家桶1年46,售后保障稳定

在这里插入图片描述

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

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

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


相关推荐

  • 如何查看某个端口被谁占用

    如何查看某个端口被谁占用

    2021年11月23日
    58
  • 简述python中的数字类型有哪些_python中都有哪些数据类型

    简述python中的数字类型有哪些_python中都有哪些数据类型python中数据类型有:整型、长整型、浮点型、字符串类型、布尔类型、列表类型、元组类型、字典类型、集合类型。数据类型是每种编程语言必备属性,只有给数据赋予明确的数据类型,计算机才能对数据进行处理运算,因此,正确使用数据类型是十分必要的,不同的语言,数据类型类似,但具体表示方法有所不同,以下是Python编程常用的数据类型:1.数字类型Python数字类型主要包括int(整型)、long(长整型…

    2022年5月26日
    53
  • WPF是什么_wpf documentviewer

    WPF是什么_wpf documentviewer项目中要用到一个数据分页栏,虽然自己没有实现过,但凭经验感觉它和ListBox/ListView有关。于是去网上搜了下WPF数据分页栏,果然很多实现都用到了ListView。于是拣了一种比较简单的实现学习,其中包含下面代码:ListView.View的标签内出现了GridView。在我印象中Grid是网格式的,而List是列表式的,所以我很好奇两者为什么可以混到一起。当然从类的关系上来看,应该是两者都继承了一个共同的父类。那么为了能使用起来更“自如”,对GridView有个系统的了解,还是有必要学习一

    2022年9月2日
    3
  • JS验证身份证的合法性[通俗易懂]

    JS验证身份证的合法性

    2022年1月20日
    44
  • img图片加载出错处理[通俗易懂]

    img图片加载出错处理[通俗易懂]为了美观当网页图片不存在时不显示叉叉图片当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:1、让这个图片元素隐藏:imgsrc=”图片的url地址”

    2022年7月26日
    31
  • Tomcat频繁宕机的原因分析「建议收藏」

    Tomcat频繁宕机的原因分析「建议收藏」资源!没有完全释放,用完后要父NULL值;数据库连接顺序关闭;优化JAVA虚拟机加入相应的内存参数;TOMCAT在LINUX下不是很稳定;String类型使用,不符合规范;不要在数据库中获取大段文本;JAVA不推荐用String获取大量信息,造成内存溢出就是它;

    2022年7月23日
    21

发表回复

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

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