JS实现图片上下切换具体代码

3403771864 发布于2022-10-16 17:28 / 442人阅读

　　本文讲述就是JS实现图片上下切换的具体代码，看看具体代码：

　　源代码：

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>Document</title>

　　margin: 0;

　　padding: 0;

　　}

　　#outer{

　　width: 130px;

　　margin: 50px auto;

　　padding: 10px;

　　background-color: greenyellow;

　　text-align: center;

　　}

　　</style>

　　window.onload=function(){

　　var prev=document.getElementById("prev");

　　var next=document.getElementById("next");

　　//切换图片就是修改img的src属性

　　//获取img标签

　　var img=document.getElementsByTagName("img")[0];

　　//创建数组,保存图片路径

　　var imgArr=["1.png","2.png","3.png"];

　　//创建变量保存当前显示图片的索引

　　var index=0;

　　//设置提示文字

　　var info=document.getElementById("info");

　　info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";

　　prev.onclick=function(){

　　index--;

　　//判断index是否小于0

　　if (index<0){

　　index=imgArr.length-1;

　　}

　　img.src=imgArr[index];

　　info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";

　　};

　　next.onclick=function(){

　　index++;

　　if(index>imgArr.length-1){

　　index=0;

　　}

　　img.src=imgArr[index];

　　info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";

　　};

　　</script>

　　</head>

　　<body>

　　</div>

　　</body>

　　</html>

　　效果如下图

　　上述内容全部讲述完毕，欢迎大家关注更多后续。

GPU云服务器云服务器 js代码图片自动切换 js实现上下键选择 asp图片切换代码 js 实现视频切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128016.html

用Vue.js实现点击左右按钮图片切换代码演示

　　本篇文章就是讲述Vue.js实现点击左右按钮图片切换的具体代码，具体内容如下：　　从多种角度实现展示给大家。　　效果：　　html　　通过v-for循环展示图片列表itemlist，将图片路径保存在data中的itemlist中，添加上下按钮的点击事件。　　<template> 　　<div> 　　<divclass="zs-adv"> ...

3403771864 2022-10-26 22:15 评论0 收藏0
谈谈常见H5制作方法——视频与CSS3

摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。视频类 1、体验案例视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...

tracy 2019-06-21 16:14 评论0 收藏0
用typescript开发手势库 - (1)web开发常用手势有哪些?

这只是个开头说在最前面,本文是一个系列文章的开头, 这个系列里我会讲如何用typescript开发一款支持pc和手机端的手势库any-touch, 以及通过jest让你的代码测试覆盖率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目录用TypeScript开发手势库 - (2)tsconfig.json & r...

raise_yang 2019-08-23 16:03 评论0 收藏0