<script language =javascript >
var curIndex=0
//时间间隔 单位毫秒
var timeInterval=5000
var arr=new Array()
arr[0]="1.jpg"
arr[1]="2.jpg"
arr[2]="3.jpg"
arr[3]="4.jpg"
arr[4]="5.jpg"
arr[5]="6.jpg"
arr[6]="7.jpg"
setInterval(changeImg,timeInterval)
function changeImg()
{
var obj=document.getElementById("showpic")
if (curIndex==arr.length-1)
{
curIndex=0
}
else
{
curIndex+=1
}
obj.src="image/"+arr[curIndex]
}
</script>
<img src="image/1.jpg" width="427" height="219" id="showpic" />
先把图片的父元素的css样式,postion设置为relative,然后图片的postion设置为absolute,然后用js来改变的图片的left 和 top数值就可以改变图片的位置了。如果不设置父元素,那就将图片的postion设置为relative,也可以改变位置,JS同样。
下面是个简单的例子,你参考下
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<style type="text/css">
*{margin: 0 padding: 0}
.wrap { position: relative }
#pic { position: absolute }
</style>
</head>
<body>
<div class="wrap">
<img id="pic" src="222.jpg">
</div>
<script type="text/javascript">
var pic = document.getElementById("pic")
pic.style.left=50+"px" //这里可以更改图片左边距
pic.style.top=30+"px" //这里可以更改图片的上边距
</script>
</body>
</html> <script type="text/javascript">
var pic = document.getElementById("pic")
pic.style.left=150+"px"
pic.style.top=130+"px"
</script>
业务:采购业务流程中当财务人员打款后需要将打款流水图片上传到ftp服务器上。可是有时会上传出错。所以这里需要一个修改的图片的按钮。问题:当img的src的URL地址与之前相同(只更改图片,名称不变,不同图片相同名称)时,结果图片不变化,还是之前的图片。但通过chrome调试发现图片确实是变化的。那造成这个问题的原因时什么呢?方法:只需要每次刷新图片时,在img的src地址后面拼接一个随机数即可。例子:原有图片地址:<img src="http://img.boredou.com/1234556788.jpg" /> 修改后图片地址:<img src="http://img.boredou.com/1234556788.jpg?23333333" /> 原理:经过在浏览起端调试,发现当src的地址不变时,浏览器会从缓存里面取出来。而浏览器缓存的还是之前的图片。所以图片不会变化。 而当img的src中拼接了随机参数,那么浏览器会认为这是一张新的图片(或者说访问了不同的路径),浏览器每次访问都会访问服务器,而不会访问缓存里数据。