JS动态效果，参考如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>浮动图片</title>
<script type="text/javascript">
var step = 1 // 移动的像素
var y = -1 // 垂直移动的方向，-1表示向上，1表示向下
var x = 1 // 水平移动的方向，-1表示向左，1表示向右
function myFloat()
{
var img = document.getElementById("myImg")
// 获取图片和当前浏览器窗口上边距，由于img.style.top获取的值带px单位
var top = img.style.top.replace("px", "")
// top = top - 100
// img.style.top = top + "px"
// 获取图片和当前浏览器窗口左边距
var left = img.style.left.replace("px", "")
// left = left - 100
// img.style.left = left + "px"
// 上下移动
if(top <= 0)
{
y = 1
}
if(top >= document.body.clientHeight)
{
y = -1
}
top = (top*1) + (step * y)
img.style.top = top + "px"
// 左右移动
if(left <= 0)
{
x = 1
}
// alert(img.clientWidth)
if(left >= (document.body.clientWidth - img.clientWidth))
{
x = -1
}
left = (left*1) + (step * x)
img.style.left = left + "px"
setTimeout("myFloat()", 20)
}
</script>
</head>
<body onload="myFloat()" style="height: 400px">
<img id="myImg" src="IP.gif"
style="position: absolute left: 500px top: 400px border: solid 1px black" />
</body>
</html>
首先准备以下的东西：1、图片若干，并规范化图片名字。从1开始。
2、在存放图片的文档中新建一个txt。
3、在txt中输入内容。
4、txt后缀改为html，完成
txt的内容：
<script>
var i
function pre()
{
if(i==1)return
i--
document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"
}
function next()
{
i++
document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"
}
</script>
<body>
<div onclick="pre()"><</div>
<div id="pic" ><</div>
<div onclick="next()">></div>
</body>
