js制作简易图片轮播图

最新推荐文章于 2024-04-27 19:42:54 发布

哼,小呀么小胖子

最新推荐文章于 2024-04-27 19:42:54 发布

阅读量160

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102146377

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

最终效果:
在这里插入图片描述
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">
    button{
        padding: 0;
        margin:0;
        border :0;
    }
    .box{
        width: 1000px;
        height: 465px;
        position: relative;
        margin: 80px auto;
    }
    .btns{
        width: 130px;
        height: 25px;
        position: absolute;
        right: 0;
        bottom:15px;
    }
    #btn{
        width: 25px;
        height: 25px;
        margin-right: 2px;
        background:rgba(138, 204,  140, .6);
    }
    #imgs{
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div class="box">
        <img id="imgs" src="img/t1.jpg" alt="">
        <div class="btns">
            <!-- 当以下4个标签发生点击事件时,调用change()函数,参数为()的内容,即图片路径 -->
            <button id="btn"  onclick="change('img/t1.jpg')">1</button>
            <button id="btn"  onclick="change('img/t2.jpg')">2</button>
            <button id="btn"  onclick="change('img/t3.jpg')">3</button>
            <button id="btn"  onclick="change('img/t4.jpg')">4</button>
        </div>
    </div>
</body>
<script>
    //在js中获取存放图片的标签
    var img=document.getElementById("imgs");
    function change(changeimg){
        //当调用该方法时,将图片的路径直接变更为参数所代表的的图片路径即可
        img.src=changeimg;
    }
</script>
</html>

哼,小呀么小胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js制作简易图片轮播图

最终效果:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
复制链接

扫一扫