有很多网站的图片是可以自动切换展示的,这里码一下其中的一种实现方法。
JSP中代码为:
<script>
var curIndex=0;
//时间间隔 单位毫秒
var timeInterval=2000;
var arr=new Array();
<c:forEach items="${indexphoto}" var="indexphoto">
arr.push("/upload/IMG/${indexphoto.getFileName()}"); //取出后台传递过来的数据库数据,并将图片文件名写入arr数组
alert("${indexphoto.getFileName()}");
</c:forEach>
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex]; //设置图片的路径
}
</script>
<ul>
<img id=obj
src="${pageContext.request.contextPath}/IMG/index/秋心.png" />
</ul>
实现效果如下: