<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
个人建议,加个滤镜做按钮背景会比较好看点。
这个水平平移,比上下平移好看点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/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:rightmargin:0 10pxpadding-top:12px}
#focus_change_btn li img { width:20pxheight:20pxborder:2px solid #888}
#abb { width:200pxheight:200px}
#abb li { display:inlinemargin:40px 20px}
#abb li img { width:200pxheight:50pxborder:0}
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id)}
/*位移算法,参数分别是:ID名,水平位移,垂直位移,和延迟时间(就是漂移时间);每次移动的距离加上一张图片的width或者height就行。*/
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,方便后面添加*/
function classNormal(){
var focusBtnList = $('focus_change_btn').getElementsByTagName('li')
for(var i=0i<focusBtnList.lengthi++) {
focusBtnList[i].className=''
}
}
/*修改下面的图片顺序*/
function changeAbb(i,j,k){
var abblist = $('abb').getElementsByTagName('img')
abblist[i].src='images/t1.gif'
abblist[j].src='images/t2.gif'
abblist[k].src='images/t3.gif'
}
/*给触发按钮添加事件*/
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'
changeAbb(0,1,2)
}
focusBtnList[1].onmouseover = function() {
moveElement('focus_change_list',-250,0,5)
classNormal()
focusBtnList[1].className='current'
changeAbb(1,0,2)
}
focusBtnList[2].onmouseover = function() {
moveElement('focus_change_list',-500,0,5)
classNormal()
focusBtnList[2].className='current'
changeAbb(1,2,0)
}
}
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:760pxheight:245px">
<ul>
<li style="float:left" ><img style="width:250pxheight:245pxborder:none" src="http://img.baidu.com/img/iknow/images/r3s1g4.gif"/> </li>
<li style="float:left"><img style="width:250pxheight:245pxborder:none" src="http://www.baidu.com/search/zhidao/task/uc/icon_10.gif"/> </li>
<li style="float:left"><img style="width:250pxheight:245pxborder:none" src="http://www.baidu.com/search/zhidao/task/uc/icon_9.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="http://img.baidu.com/img/iknow/images/r3s1g4.gif" alt="" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/search/zhidao/task/uc/icon_10.gif" alt="" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/search/zhidao/task/uc/icon_9.gif" alt="" /></a></li>
</ul>
</div>
</div>
<div>
<ul id="abb">
<li><a href="#"><img src="http://img.baidu.com/img/iknow/images/r3s1g4.gif" alt="" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/search/zhidao/task/uc/icon_10.gif" alt="" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/search/zhidao/task/uc/icon_9.gif" alt="" /></a></li>
</ul>
</div>
</body>
</html>
/*楼主的图片我看不清楚,我用百度中心的图替代一下。CSS改成自己需要的,我中间加了个遮蔽层,楼主觉得不好看可以删掉*/