学完前端三件套，图片切换来练手一下_前端图片切换的组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_44811903/article/details/129226573

切换原理：

通过不断给主图片设置源文件地址的方式，达到图片切换的目的。

步骤：

先写切换脚本
方法参数就是图片源文件地址
通过id获取主图片的对象，调用.src方法设置图片所在位置
使用方法参数当中的地址，替换主图片地址

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    导入提前写好的切换脚本-->
    <script src="../js/index.js"></script>
</head>
<body>
<div>
    <div class="main">
        <!--        主图片无需进行任何动作，自然不需要添加单击事件-->
        <img src="" height="300" width="300" id="mainImg"/>
    </div>
    <div class="main">
        <!--        给每一个图片添加单击事件，调取JavaScript当中的imgChange方法，参数为该图片所在地址-->
        <img src="../img/0.jpg" height="30" width="30" onclick="imgChange('../img/0.jpg')"/>
        <img src="../img/1.jpg" height="30" width="30" onclick="imgChange('../img/1.jpg')"/>
        <img src="../img/2.jpg" height="30" width="30" onclick="imgChange('../img/2.jpg')"/>
        <img src="../img/3.jpg" height="30" width="30" onclick="imgChange('../img/3.jpg')"/>
        <img src="../img/4.jpg" height="30" width="30" onclick="imgChange('../img/4.jpg')"/>
    </div>
</div>
</body>
</html>

javascript文件

function  imgChange(imgSrc) {
    document.getElementById("mainImg").src=imgSrc;
}

效果展示

在这里插入图片描述