html实现图片切换

最新推荐文章于 2024-04-14 21:48:49 发布

走肉钓咸鱼

最新推荐文章于 2024-04-14 21:48:49 发布

阅读量1.2w

点赞数 12

本文链接：https://blog.csdn.net/qq_45425315/article/details/105101581

版权

实现效果

在这里插入图片描述

效果介绍

单击图片内部的左右两个小三角图片可实现主图片循环切换

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img{
            width: 739px;
            height: 419px;
            margin: 0 auto;
            padding: 0px;
            border: 1px solid red;
            /* 设置相对位置，只有将外层元素设置相对位置，子元素设置绝对位置，才能将子元素放置在父元素内部的特定位置 */
            position: relative;
        }
        #img>.lleft{
            
            width: 23px;
            height: 40px;
            /* 设置子元素绝对位置 */
            position: absolute;
            left: 0px;
            top: 48%;
        }
        #img>.rright{
            width: 28px;
            height: 42px;
            position: absolute;
            right: 0px;
            top: 48%;
        }
    </style>
</head>
<body>
    <div id="img">
            <!-- 单击图片进入百度 -->
            <a href="https://www.baidu.com/">
                <img id="imgs" src="imgs/gm1.jpg" alt="无法显示">
            </a>
        <div class="lleft">
            <img src="imgs/l1.png" alt="无法显示">           
        </div>
        <div class="rright">
            <img src="imgs/r1.png" alt="无法显示">
        </div>
    </div>
    <script>
        var index=0;
        var img_data=['imgs/gm1.jpg','imgs/gm2.jpg','imgs/gm3.jpg','imgs/gm4.jpg']
        // 获得相应元素对象
        var rright=document.getElementsByClassName("rright")[0];
        var llef=document.getElementsByClassName("lleft")[0];
        var img=document.getElementById("imgs");
        // 通过对象的单击事件触动函数调用函数实现图片切换
        rright.onclick=function(){
            index++;
            if(index==img_data.length) index=0;
            img.setAttribute('src',img_data[index]);
        }
        llef.onclick=function(){
            if(index==0) index=img_data.length;
            index--;
            img.setAttribute('src',img_data[index]);
        }
    </script>
</body>
</html>

走肉钓咸鱼

关注

12
点赞
踩
76

收藏

觉得还不错? 一键收藏
2
评论
html实现图片切换

实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
复制链接

扫一扫