页面代码
<div class="container" id="container">
<div id="list">
<img alt="3" src="<%=tu2%>">
<img alt="1" src="<%=tu%>">
<img alt="2" src="<%=tu1%>">
<img alt="3" src="<%=tu2%>">
<img alt="1" src="<%=tu%>">
</div>
<a href="javascript:void(0)" class="arrow" id="left" ></a>
<a href="javascript:void(0)" class="arrow" id="right" ></a>
<div class="btns">
<span class="on" index="1"></span>
<span index="2"></span>
<span index="3"></span>
</div>
</div>
js代码段
var timeout = null;
window.onresize = function () {
clearTimeout(timeout);
timeout = setTimeout(function () { window.location.reload(container); }, 100);
};
window.onresize:页面缩放时执行函数function
window.location.reload():不传参时,所有页面都会在缩放时重新加载
window.location.reload(container):传递参数container,container为页面代码里面div的class/id的值,此时页面缩放时只会对包含container的模块进行部分重新加载刷新。
参考阀门网站:https://www.cnklfm.com/
由于轮播图设置宽度为100%,页面缩小时其它图片也会部分显示,此时就需要在缩放时让该模块重新加载,其它页面保持正常。