egooooooo 2022-02-18 23:14 采纳率: 0%
浏览 49

js轮播图，图片宽度比较大，而且宽度不一致，怎么设置

轮播图的图片都比较大，而且有一张的宽度也不同，现在给图片宽度设置100%的话，我是用修改left的值自动播放，会导致轮播出现问题，而且页面也显示不完整

  • 写回答

3条回答 默认 最新

  • CSDN专家-赖老师（软件之家） 2022-02-18 23:35
    关注

    裁剪一下，轮播图一般都是预先设置好一样大小的图片，或者设置固定大小的width,height属性，这样图片会变形。

    评论 编辑记录

报告相同问题？

  • JavaScript实现简单图片轮播效果
    2020-10-19 08:39
    目标位置是根据当前按钮的索引与图片宽度的乘积计算得出。 6. 动画函数animate：为了实现平滑的图片切换效果，通常会使用定时器来逐步改变图片的位置。这里的animate函数首先清除之前可能存在的定时器，防止动画...
  • 轮播图js怎么设置图片自适应大小
    2020-03-04 17:39
    梁同学与Android的博客 单独的图片控制，用这个： 代码如下: <script> var abc=document.getElementById("abc"); var imgs=abc.getElementsByTagName("img"); for (var i=0,g;g=imgs[i];i++) { g.onload=function() { if (this....
  • 图片轮播网页源代码-学习
    2024-11-11 10:01
    每个子元素代表一个轮播项，通常会设置相同的宽度和高度，以确保所有图片展示时的尺寸一致。此外，可能会有一个指示器，用以显示当前处于激活状态的图片。 CSS方面，设计师会使用选择器和样式规则来美化轮播图，...
  • 原生JS实现无缝轮播图片
    2020-11-20 04:22
    `.box`作为容器，设置了相对定位和隐藏溢出，`.pic-box`是图片容器，设置了绝对定位并设置了总宽度（等于所有图片宽度之和），`.pic-box > li`是单个图片元素，`float: left`使其水平排列。`.point`是小圆点导航，`....
  • jQuery图片轮播插件——前端开发必看
    2020-11-24 06:04
    1. 计算轮播的总宽度，根据图片数量将图片容器的宽度设置为所有图片宽度之和。 2. 初始时，第一个图片位于可视区域，其他图片移出屏幕。 3. 设置定时器，每隔一定时间自动切换到下一张图片。这可以通过改变图片容器...
  • jQuery制作全屏宽度固定高度轮播图(实例讲解)
    2020-10-19 13:50
    【jQuery制作全屏宽度固定高度轮播图】是一种常见的网页设计元素，用于展示多张全屏大小的图像，以滑动或切换的方式呈现。在这个实例中，我们将详细讲解如何使用jQuery实现这一功能。 首先，HTML结构是轮播图的基础...
  • vue 手写手动轮播 且图片宽度不一样
    2024-04-18 11:16
    不想上班只想要钱的博客 vue 手写手动轮播 且图片宽度不一样。下面的实现左右切换的方法。
  • JavaScript 轮播图.rar
    2020-04-08 02:00
    JavaScript 轮播图是一种常见的前端网页交互效果，它能够以自动或手动的方式展示一系列图片或其他内容，常用于网站的首页或产品展示区域。在这个项目中，通过HTML、CSS和JavaScript的结合，我们可以创建一个自定义的...
  • Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
    2020-10-21 23:41
    当轮播组件的尺寸是固定的，而插入的图片尺寸不一致时，图片可能会因为不符合轮播组件的尺寸而发生拉伸或压缩，从而导致变形。这种变形可能会使图片看起来失真，失去原有的美观。 为了解决这个问题，jqthumb.js提供...
  • h5实现点击图片，放大当前图片并轮播图片
    2020-12-10 12:05
    - 大图容器初始时可以设置为隐藏，并预留足够的空间以适应放大后的图片。 - 遮罩层可以是一个全屏的透明`<div>`，背景色为半透明黑色，初始状态同样为隐藏。 3. **JavaScript交互**： - 使用事件监听器（如`...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 2月18日