使用JS实现简单的图片切换功能

3403771864 发布于2022-09-23 22:20 / 428人阅读

　　我们今天就说说用JS实现图片的切换,效果如图：

　　分析：要实现切换，先有一个按钮添加点击响应时间，可以用构造函数。切换图片实现动作可以用切换img标签src的属性，可以获取标签属性然后进行修改即可。就要把属性值存放在一个数组中，通过数组的索引来获取。

　　附上相关代码：

　　css部分代码：

　　<style type="text/css">
　　*{
　　margin: 0;
　　padding: 0;
　　}
　　#a{
　　margin: 50px auto;
　　width: 500px;
　　padding: 15px;
　　text-align: center;
　　background-color: #99FF99;
　　}
　　</style>

　　js代码：

　　<script>
　　window.onload=function(){
　　var btn1 = document.getElementById("btn1");
　　var btn2 = document.getElementById("btn2");
　　var img = document.getElementsByTagName("img")[0];
　　//构建一个数组存图片
　　var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
　　var index = 0;
　　//console.log(src);
　　var p = document.getElementById("b");
　　btn1.onclick = function(){
　　//alert("1");
　　//img.src="img/2.jpg"
　　index--;
　　if (index<0){
　　index = imgArr.length-1
　　}
　　img.src=imgArr[index]
　　p.innerHTML = "共"+ imgArr.length+"张图片，当前第"+(index+1)+"张"
　　};
　　btn2.onclick = function(){
　　//alert("2");
　　index++;
　　if (index>4){
　　index = 0;
　　}
　　img.src=imgArr[index]
　　p.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
　　};
　　};
　　</script>

　　body部分：

　　<body>
　　<div id="a">
　　<img src="img/1.jpg" alt="雪糕" />
　　<button id="btn1">上一张</button>
　　<button id="btn2">下一张</button>
　　<p id="b">共5张图片，当前第1张</p>
　　</div>
　　</body>

　　以上就是全部内容，让大家学到更多相关内容。

GPU云服务器云服务器 js实现的简单特效简单的上传图片js python实现简单爬虫功能简单js焦点切换代码

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

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

JS基础入门篇（二）—if ，字符串拼接，数组，图片循环切换

摘要：错误，因为取到的是字符串，相加会造成字符串拼接。强制转换，将字符串类型转成数字类型。以上代码结果为解释和获取到的是字符串，当字符串相加时，会直接拼接字符串。表示数组的线长度。重新定义数组长度，后面个数组的值都为图片切换两张图片切换。 1.if篇 1. if 语法: if( 判断条件 ){ 代码块 } 以上代码的功能是：如果判断...

betacat 2019-08-22 17:13 评论0 收藏0
JS基础入门篇（二）—if ，字符串拼接，数组，图片循环切换

摘要：错误，因为取到的是字符串，相加会造成字符串拼接。强制转换，将字符串类型转成数字类型。以上代码结果为解释和获取到的是字符串，当字符串相加时，会直接拼接字符串。表示数组的线长度。重新定义数组长度，后面个数组的值都为图片切换两张图片切换。 1.if篇 1. if 语法: if( 判断条件 ){ 代码块 } 以上代码的功能是：如果判断...

yhaolpz 2019-08-29 15:23 评论0 收藏0
JS基础入门篇（二）—if ，字符串拼接，数组，图片循环切换

摘要：错误，因为取到的是字符串，相加会造成字符串拼接。强制转换，将字符串类型转成数字类型。以上代码结果为解释和获取到的是字符串，当字符串相加时，会直接拼接字符串。表示数组的线长度。重新定义数组长度，后面个数组的值都为图片切换两张图片切换。 1.if篇 1. if 语法: if( 判断条件 ){ 代码块 } 以上代码的功能是：如果判断...

MudOnTire 2019-08-02 10:26 评论0 收藏0
实现简单的轮播图

摘要：小练习轮播图组件任务描述在和上一任务同一目录下面创建一个文件，在目录中创建，并在其中编码，实现一个轮播图的功能。实现思路考察对节点，定时器，事件的处理。小练习3：轮播图组件任务描述在和上一任务同一目录下面创建一个task0002_3.html文件，在js目录中创建task0002_3.js，并在其中编码，实现一个轮播图的功能。图片数量及URL均在HTML中写好可以配置轮播的顺...

EsgynChina 2019-08-22 10:39 评论0 收藏0