<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/* 这里是CSS，修改成自己满意的CSS楼主自己修改 */
* { margin:0padding:0word-break:break-all}
ul, li { list-style:none}
#focus_change_btn .current { background:url() no-repeat 37px 8px}
#focus_change_btn .current img { border-color:#EEE}
#focus_change_btn li { display:inlinefloat:leftmargin:0 28pxpadding-top:12px}
#focus_change_btn li img { width:20pxheight:20pxborder:2px solid #888}
</style>
<script type="text/javascript">
//获得element
function $(id) { return document.getElementById(id)}
//移动的算法，说下参数吧：
//elementID为需要移动element的ID；
//final_x为左右平移的值，这里没设，如果楼主想左右平移而不是上下平移的话这里设
//final_y为上下平移的值，同上
//interval为延迟时间，就是移动的速度
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false
if (!document.getElementById(elementID)) return false
var elem = document.getElementById(elementID)
if (elem.movement) {
clearTimeout(elem.movement)
}
if (!elem.style.left) {
elem.style.left = "0px"
}
if (!elem.style.top) {
elem.style.top = "0px"
}
var xpos = parseInt(elem.style.left)
var ypos = parseInt(elem.style.top)
if (xpos == final_x &&ypos == final_y) {
return true
}
if (xpos <final_x) {
var dist = Math.ceil((final_x - xpos)/10)//ceil(x)对x进行上舍入
xpos = xpos + dist
}
if (xpos >final_x) {
var dist = Math.ceil((xpos - final_x)/10)
xpos = xpos - dist
}
if (ypos <final_y) {
var dist = Math.ceil((final_y - ypos)/10)
ypos = ypos + dist
}
if (ypos >final_y) {
var dist = Math.ceil((ypos - final_y)/10)
ypos = ypos - dist
}
elem.style.left = xpos + "px"
elem.style.top = ypos + "px"
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
elem.movement = setTimeout(repeat,interval)
}
//这里修改按钮图片的CSS，这里只简单的设置了border
function classNormal(){
var focusBtnList = $('focus_change_btn').getElementsByTagName('li')
for(var i=0i<focusBtnList.lengthi++) {
focusBtnList[i].className=''
}
}
//这里开始赋值，鼠标移到到哪个图片移动多少位移，参数为每张图片的倍数。
function focusChange() {
var focusBtnList = $('focus_change_btn').getElementsByTagName('li')
focusBtnList[0].onmouseover = function() {
moveElement('focus_change_list',0,0,5)
classNormal()
focusBtnList[0].className='current'
}
focusBtnList[1].onmouseover = function() {
moveElement('focus_change_list',0,-245,5)
classNormal()
focusBtnList[1].className='current'
}
focusBtnList[2].onmouseover = function() {
moveElement('focus_change_list',0,-490,5)
classNormal()
focusBtnList[2].className='current'
}
focusBtnList[3].onmouseover = function() {
moveElement('focus_change_list',0,-735,5)
classNormal()
focusBtnList[3].className='current'
}
}
window.onload=function(){
focusChange()
}
</script>
</head>
<body>
<div style="width:410pxheight:245pxposition:relativemargin:0padding:0border:1px solid blue">
<div id="focus_change" style="position:relativewidth:250pxheight:245pxoverflow:hiddenmargin:0px 0px 0px 80px">
<div id="focus_change_list" style="top:0left:0position:absolutewidth:250pxheight:1500px">
//大图
<ul>
<li style="float:left" ><img style="width:250pxheight:245pxborder:none" src="images/t1.gif"/> </li>
<li style="float:left"><img style="width:250pxheight:245pxborder:none" src="images/t2.gif"/> </li>
<li style="float:left"><img style="width:250pxheight:245pxborder:none" src="images/t3.gif"/></li>
<li style="float:left"><img style="width:250pxheight:245pxborder:none" src="images/t4.gif"/></li>
</ul>
</div>
</div>
<div style="position:absolutewidth:410pxheight:30pxtop:200pxleft:0background:#000filter:alpha(opacity=50)-moz-opacity:0.5opacity: 0.5"></div>
<div id="focus_change_btn" style="position:absolutewidth:410pxheight:60pxtop:190pxleft:0">
//小图
<ul style="padding-left:5px">
<li class="current"><a href="#"><img src="images/t1.gif" alt="" /></a></li>
<li><a href="#"><img src="images/t2.gif" alt="" /></a></li>
<li><a href="#"><img src="images/t3.gif" alt="" /></a></li>
<li><a href="#"><img src="images/t4.gif" alt="" /></a></li>
</ul>
</div>
</div>
</body>
</html>
---------分割线------
注释都已添加
图片建一个文件夹images里面4张图t1.gif
，t2.gif，t3.gif，t4.gif
个人建议，加个滤镜做按钮背景会比较好看点。
这个水平平移，比上下平移好看点。
var picID = 0//换成网页中那幅图在picURL中的序号(记得要从0开始数)var picURL = ["images/img1.jpg","images/img2.jpg","images/img3.jpg"]//将图片链接地址放进来，数量随意
function showimg(str){
if(str=="L"){
if(picID==0){
picID = picURL.length-1
document.getElementById("advimg").src = picURL[picID]
}else{
document.getElementById("advimg").src = picURL[--picID]
}
}else if(str=="R"){
if(picID==(picURL.length-1)){
picID = 0
document.getElementById("advimg").src = picURL[picID]
}else{
document.getElementById("advimg").src = picURL[++picID]
}
}
}
