设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 图片自适应
返回列表 发新帖
查看: 270|回复: 1

[已解决]图片自适应

[复制链接]
maikehong
发表于 2024-4-20 01:16:43 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
<!DOCTYPE html>
<html>
<head>
    <title>轮播图</title>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
</head>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1582902_u0zm91pv15i.css">
<style type="text/css">
    body{
        margin: 0;
        padding: 0px;
    }
    #carousel{
        margin: auto; /* 居中 */
        width: 0%; /* 设置宽度 */
        position: relative; /* 相对定位 */
        overflow: hidden; /* 超出隐藏 */
    }
#carousel img{
        position: absolute; /* 绝对定位 使图片堆叠 */
        width: 100%; /* 设定大小 按比例缩放 */
        transition: all .3s; /* 动画 */
        opacity: 0; /* 隐藏 */
        max-width: 100%; /* 添加自适应宽度 */
        height: auto; /* 添加自适应高度 */
    }
    .imgActive{
        opacity: 1 !important; /* 显示图片 最高优先级 */
    }

    /* 控制按钮的样式 */
    #leftArrow,
    #rightArrow{
        position: absolute;
        left: 5px;
        top: 43%;
        width: 45px;
        height: 100px;
        background-color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.7;
        font-size: 20px;
        cursor: pointer;
        z-index: 1000;
    }
    #rightArrow{
        left: auto;
        right: 5px;
    }
    #sliderBtn{
        position: absolute;
        width: 100%;
        bottom: 0;
        display: flex;
        justify-content: flex-end;
        z-index: 1000;
    }
    .unitBtn{
        width: 10px;
        height: 10px;
        background-color: #eee;
        border-radius: 10px;
        margin: 10px;
        cursor: pointer;
    }
    .btnActive{
        background-color: #4C98F7;
    }
    #carousel img {
    position: absolute;
    width: 100%;
    transition: all .3s;
    opacity: 0;
    border-radius: 20px; /* 添加圆角 */
}
#carousel {
    margin: auto;
    width: 90%;
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* 添加容器的圆角 */
}

</style>
<body>
    <!-- 轮播图容器 -->
    <div id="carousel">
        <img src="https://2vimg.hitv.com/100/2404/1911/2044/ZErDNyq0YW7I/282833847535788032.jpg">
        <img src="https://liangcang-material.alicdn.com/prod/upload/65f3b50c02c04e3a884e499291fdfec4.webp.jpg">
        <img src="https://img.zcool.cn/community/01897755443e1a0000019ae956e311.jpg@1280w_1l_2o_100sh.jpg">
        <img src="https://img.redocn.com/sheji/20200209/jijianwuhanfeiyanqidaowuhanpinganhaibao_10813845.jpg">
        <!-- 按钮组 -->
        <div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->
        <div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
        <div id="sliderBtn"></div> <!-- 切换按钮组 -->
    </div>
</body>
    <script type="text/javascript">
        var imgArr = []; // 图片数组
        var curIndex = 0; // 当前显示图片
        var timer = null; // 定时器
        var btnList = []; // 右下角切换按钮组

        function slide(targetIndex = curIndex + 1){
            curIndex = targetIndex % imgArr.length; // 获取当前index
            imgArr.forEach((v) => v.className = "" ); // 设置其他图片隐藏
            imgArr[curIndex] .className = "imgActive"; // 设置当前index图片显示
            btnList.forEach(v => v.className = "unitBtn") // 设置其他按钮为灰色
            btnList[curIndex] .className = "unitBtn btnActive"; // 设置当前按钮为蓝色
        }

        function createBtnGroup(carousel,config){
            document.getElementById("leftArrow").addEventListener('click',(e) => {
                clearInterval(timer); // 清除定时器，避免手动切换时干扰
                slide(curIndex-1); // 允许点击则切换上一张
                timer = setInterval(() => {slide()},config.interval); // 重设定时器
            })
            document.getElementById("rightArrow").addEventListener('click',(e) => {
                clearInterval(timer); // 清除定时器，避免手动切换时干扰
                slide(curIndex+1); // 允许点击则切换下一张
                timer = setInterval(() => {slide()},config.interval); // 重设定时器
            })
            var sliderBtn = document.getElementById("sliderBtn"); // 获取按钮容器的引用
            imgArr.forEach((v,i) => {
                let btn = document.createElement("div"); // 制作按钮
                btn.className = i === 0 ?  "unitBtn btnActive" : "unitBtn"; // 初设蓝色与灰色按钮样式
                btn.addEventListener('click',(e) => {
                    clearInterval(timer); // 清除定时器，避免手动切换时干扰
                    slide(i); // // 允许点击则切换
                    timer = setInterval(() => {slide()},config.interval); // 重设定时器
                })
                btnList.push(btn); // 添加按钮到按钮组
                sliderBtn.appendChild(btn); // 追加按钮到按钮容器
            })
        }

        function eventDispose(carousel,config){
            document.addEventListener('visibilitychange',function(){ // 浏览器切换页面会导致动画出现问题，监听页面切换
                if(document.visibilityState=='hidden') clearInterval(timer); // 页面隐藏清除定时器
                else timer = setInterval(() => {slide()},config.interval); // 重设定时器
            });
            carousel.addEventListener('mouseover',function(){ // 鼠标移动到容器则不切换动画，停止计时器
                clearInterval(timer); // 页面隐藏清除定时器
            });
            carousel.addEventListener('mouseleave',function(){ // 鼠标移出容器则开始动画
                timer = setInterval(() => {slide()},config.interval); // 重设定时器
            });
        }


        (function start() {
            var config = {
                height: "500px", // 配置高度
                interval: 5000 // 配置轮播时间间隔
            }
            var carousel = document.getElementById("carousel"); //获取容器对象的引用
            carousel.style.height = config.height; // 将轮播容器高度设定
            document.querySelectorAll("#carousel img").forEach((v,i) => {
                imgArr.push(v); // 获取所有图片组成数组
                v.className = i === 0 ?  "imgActive" : "";
            });
            eventDispose(carousel,config); // 对一些浏览器事件处理
            createBtnGroup(carousel,config); // 按钮组的处理
            timer = setInterval(() => {slide()},config.interval); // 设置定时器定时切换
        })();
    </script>
</html>
帮忙检查一下   为什么图片不自适应     代码还能在优化简洁一下吗？
最佳答案
月排行榜 / 总排行榜
FishC
2024-4-20 01:17:14
您好！根据您提供的代码，图片不自适应的问题可能是由于没有正确设置图片的父级容器的宽度和高度导致的。在您的代码中，轮播容器的宽度是通过设置`width: 0%;`来实现的，这样会导致容器宽度为0，无法正确显示图片。

要使图片自适应容器的大小，可以将轮播容器的宽度设置为固定值，比如`width: 600px;`，然后将图片的宽度设置为100%，即`width: 100%;`，高度设置为auto，即`height: auto;`。这样，图片就会根据容器的大小自动进行缩放。

此外，为了保持图片的比例，您可以在图片的样式中添加`object-fit: cover;`，这样可以确保图片在拉伸时不会变形。

以下是修改后的代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片自适应轮播图</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #carousel {
            margin: auto; /* 居中 */
            width: 600px; /* 设置宽度为固定值 */
            height: 300px; /* 设置高度为固定值 */
            position: relative; /* 相对定位 */
            overflow: hidden; /* 超出隐藏 */
        }
        #carousel img {
            position: absolute; /* 绝对定位 使图片堆叠 */
            width: 100%; /* 设定宽度 按比例缩放 */
            height: auto; /* 添加自适应高度 */
            object-fit: cover; /* 保持图片比例 */
            transition: all .3s; /* 动画 */
            opacity: 0; /* 隐藏 */
            border-radius: 20px; /* 添加圆角 */
        }
        .imgActive {
            opacity: 1 !important; /* 显示图片 最高优先级 */
        }
        /* 其他样式... */
    </style>
</head>
<body>
    <div id="carousel">
        <img src="image1.jpg" alt="" class="imgActive">
        <img src="image2.jpg" alt="">
        <img src="image3.jpg" alt="">
        <!-- 其他图片... -->
    </div>
    <!-- 控制按钮和其他代码... -->
    <script>
        var imgArr = []; // 图片数组
        var curIndex = 0; // 当前显示图片
        var timer = null; // 定时器
        var btnList = []; // 右下角切换按钮组
        // 其他代码...
    </script>
</body>
</html>

经过上述修改，图片就会根据容器的大小自动进行缩放，并且保持比例不变形。

在代码优化方面，您的代码已经相当简洁了，但还是有一些可以改进的地方。例如，可以使用`querySelector`和`querySelectorAll`方法来获取元素，而不是使用`getElementById`和`getElementsByTagName`方法。另外，可以用ES6的箭头函数和模板字符串简化代码，如使用`forEach`替代`for`循环。最后，可以将函数的命名更具有语义化，便于代码的可读性。

希望以上解答能够帮助到您！如果还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-4-20 01:17:14 | 显示全部楼层    本楼为最佳答案   
您好！根据您提供的代码，图片不自适应的问题可能是由于没有正确设置图片的父级容器的宽度和高度导致的。在您的代码中，轮播容器的宽度是通过设置`width: 0%;`来实现的，这样会导致容器宽度为0，无法正确显示图片。

要使图片自适应容器的大小，可以将轮播容器的宽度设置为固定值，比如`width: 600px;`，然后将图片的宽度设置为100%，即`width: 100%;`，高度设置为auto，即`height: auto;`。这样，图片就会根据容器的大小自动进行缩放。

此外，为了保持图片的比例，您可以在图片的样式中添加`object-fit: cover;`，这样可以确保图片在拉伸时不会变形。

以下是修改后的代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片自适应轮播图</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #carousel {
            margin: auto; /* 居中 */
            width: 600px; /* 设置宽度为固定值 */
            height: 300px; /* 设置高度为固定值 */
            position: relative; /* 相对定位 */
            overflow: hidden; /* 超出隐藏 */
        }
        #carousel img {
            position: absolute; /* 绝对定位 使图片堆叠 */
            width: 100%; /* 设定宽度 按比例缩放 */
            height: auto; /* 添加自适应高度 */
            object-fit: cover; /* 保持图片比例 */
            transition: all .3s; /* 动画 */
            opacity: 0; /* 隐藏 */
            border-radius: 20px; /* 添加圆角 */
        }
        .imgActive {
            opacity: 1 !important; /* 显示图片 最高优先级 */
        }
        /* 其他样式... */
    </style>
</head>
<body>
    <div id="carousel">
        <img src="image1.jpg" alt="" class="imgActive">
        <img src="image2.jpg" alt="">
        <img src="image3.jpg" alt="">
        <!-- 其他图片... -->
    </div>
    <!-- 控制按钮和其他代码... -->
    <script>
        var imgArr = []; // 图片数组
        var curIndex = 0; // 当前显示图片
        var timer = null; // 定时器
        var btnList = []; // 右下角切换按钮组
        // 其他代码...
    </script>
</body>
</html>

经过上述修改，图片就会根据容器的大小自动进行缩放，并且保持比例不变形。

在代码优化方面，您的代码已经相当简洁了，但还是有一些可以改进的地方。例如，可以使用`querySelector`和`querySelectorAll`方法来获取元素，而不是使用`getElementById`和`getElementsByTagName`方法。另外，可以用ES6的箭头函数和模板字符串简化代码，如使用`forEach`替代`for`循环。最后，可以将函数的命名更具有语义化，便于代码的可读性。

希望以上解答能够帮助到您！如果还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 02:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表