HTML 如何让浏览器缓存图片重新加载

轮播效果已经实现了，pic2-pic4 需要定时更新图片，文件名不变，所以需要绕过浏览器的缓存问题，网上的方法就是给图片结尾时间或随机数，我用了+Math.random() 加随机数，然后浏览器缓存中也已经按定时加载了带有随机数结尾的图片

pic2.png?t=0.04027631228529205 pic2.png?t=0.07900295045139183 pic3.png?t=0.9565799922757663 ...

但浏览器页面上显示的轮播图还是初始页加载的图，没有变化，F5 刷新后，也只是将缓存中的随机图片文件给清理了，初始页图片都还在缓存里；只有 CTL+F5 才会重新加载；

<meta http-equiv="Refresh" cOntent="30" /> # 也不起作用, F5 的效果 

<!-- 轮播图容器 --> <div id="roll"> <ul class=""imglist> <!-- 图片容器 --> <li> <img src="http://www.v2ex.com/pic1.png" id="pic1"/> </li> <li> <img src="http://www.v2ex.com/pic2.png" id="pic2"/> </li> <li> <img src="http://www.v2ex.com/pic3.png" id="pic3"/> </li> <li> <img src="http://www.v2ex.com/pic4.png" id="pic4"/> </li> </ul> </div> <script> setInterval(function() { document.getElementById("pic2").innerHTML='<img src="http://www.v2ex.com/pic2.png?t=' +Math.random() + '" />'; document.getElementById("pic3").innerHTML='<img src="http://www.v2ex.com/pic3.png?t=' +Math.random() + '" />'; document.getElementById("pic4").innerHTML='<img src="http://www.v2ex.com/pic4.png?t=' +Math.random() + '" />'; }, 6000); </script> 

我可能需要解决把新生成的带有随机数结尾的图片带