轮播图js怎么设置图片自适应大小

Posted 2023-05-17

参考技术A 单独的图片控制，用这个：
代码如下:

<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.width>300)this.width=300elseif (this.height>300)this.height=300
</script>

Vue在同一个页面制作多个轮播图

参考技术A

其实很简单，只需要为每个轮播图设置不同的class类和不同的options名即可。

实现的效果图：

因为第二个轮播图是左右滑动，可能会报下面的错：
这是因为封装好的swiper.js文件中有一个默认事件，
e.preventDefault() 只要注释掉该事件即可。
————————————————
以上是摘自我的博客，顺便帮我的博客引流，哈哈哈~
原文链接： https://blog.csdn.net/weixin_43332684/article/details/107424702