js实现切换图片

墨蓝 2022-09-11 15:26 190阅读 0赞

描述：鼠标点击下一张，图片切换到下一张

图片可替换

<style>
            body{
                text-align: center;
            }
        </style>

<img src="./img/1.jpg" alt="">
        <br>
        <button>下一张</button>

<script>
        //    1、获取元素
        var img = document.getElementsByTagName('img')[0];
        var btn = document.getElementsByTagName('button')[0];
        console.log(img,btn);
        // 2、加事件
        // 4、不知道起始位置 假设一个变量存初始值
        var n = 1;
        btn.onclick = function (){
            // 3、切换到下一张
            n++;
            console.log(n);
            // 5、换图片
            img.src = './img/' + n + '.jpg'
        }
        </script>

效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/0b3d42e0f41049919321d8717ebad9f9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/dfba09e595214860a2e9cbfc7f262d78.png

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 (js特效) js代码实现图片切换

图效果： ![Center][] 页面代码： <%@ page language="java" import="java.util.*" pageEncod...

朴灿烈づ我的快乐病毒、/ 2024年04月17日 23:13/ 0 赞/ 58 阅读

相关练习：js实现点击切换图片

点击切换图片，控制是否可以循环切换 <!DOCTYPE html> <html lang="en"> <head> <met

Dear 丶/ 2023年07月07日 11:05/ 0 赞/ 164 阅读

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，

比眉伴天荒/ 2022年10月06日 07:52/ 0 赞/ 335 阅读

相关 js实现切换图片

描述：鼠标点击下一张，图片切换到下一张图片可替换 <style> body{ t

墨蓝/ 2022年09月11日 15:26/ 0 赞/ 191 阅读

相关 js图片切换代码

</pre><pre name="code" class="html"><body> <img id="obj" src="img/2.jpg"/>

向右看齐/ 2022年07月16日 06:29/ 0 赞/ 213 阅读

相关原生js(JavaScript)实现手动切换图片效果

手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。

曾经终败给现在/ 2022年05月20日 10:26/ 0 赞/ 257 阅读

相关利用JS实现图片切换

事件举例: 1.要求实现效果：当鼠标悬停在照片上时更换为另一张照片；当鼠标离开时，还原为本来的图片。说明： 1.一般来说对于一个事件问题处理起来分为三个步骤：

清疚/ 2022年04月15日 01:15/ 0 赞/ 724 阅读

相关 js按钮切换图片案例

js修改img标签src属性的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"

悠悠/ 2022年04月06日 05:56/ 0 赞/ 297 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 406 阅读

相关 js图片自动切换效果

自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用代码如下: <script language =javascr

迷南。/ 2021年07月04日 17:12/ 0 赞/ 513 阅读