效果如图所示：
http://s5/middle/48e6792cxc082c2742964&690
设计思路：
1、设计好图片轮播HTML代码，以及CSS定位，CSS中着重运用好position属性，relative和absolute；
CSS代码如下：
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style-type:none;}
body{ color:#333333; font:12px/1.6em Arial, Helvetica,
sans-serif;}
#picfocus{width:345px; height:235px; border:1px solid #ccc;
margin:5px;}
#piclist{position: relative; float:left; width:240px; height:225px;
overflow:hidden; margin:5px 0px 0px 9px; display:inline;}
#pic{position:absolute;}
#pic li{overflow:hidden;width:240px; height:225px;}
#pic img{ width:240px; height:225px;}
#pictxtbg{position:absolute; bottom:0px; left:0px; background: none
repeat scroll 0 0 #000000; opacity:0.5; width:240px; height:35px;
filter:alpha(opacity=50);}
#pictxt{ position:absolute; bottom:8px; left:8px;
color:#fff;}
#pictxt .normal{display:none;}
#pictxt .current{ display:block;}
#pic{ overflow:hidden;}
#picbtn{float:right; display:inline; margin:2px 9px 0px 0px;}
#picbtn li{ cursor:pointer; height:57px; opacity:0.5;
filter:alpha(opacity=50);}
#picbtn img{ width:75px; height:45px; margin:7px 0px 0px
11px;}
#picbtn .current{ opacity:1; filter:alpha(opacity=100);}
</style>
2、JS代码设计思路：
（1）当鼠标移动到小图片按钮上时，促发onmouseover函数，调整大图片显示的当前位置，显示当前对应的大图片，以及改变当前显示的小图片按钮及图片标题样式。
（2）编写移动相应的大图片到当前位置的函数，movePic(pic,final_x,final_y,interval)；
编写初始化小图片按钮的样式及标题样式，classNormal(picbtn,pictxt)
编写显示当前图片的样式及标题样式，classCurrent(picbtn,pictxt,n)
（3）当鼠标移动到小图片按钮时，调用以上三个函数。
（4）自动切换图片，编写函数autoChange()，利用setInterval('autoChange()',interval)函数自动切换图片。
相关HTML及JS代码如下：
<body>
<script type="text/javascript">
//加载window.onload
function
addEventLoad(func){
var
oldonload = window.onload;
if(typeof(window.onload) != 'funciton'){
window.onload = func;
}
else {
window.onload = function(){
oldonload();
func();
}
}
}
//初始化小图片及图片标题样式
function classNormal(picbtn,pictxt){
var picbtns =
document.getElementByIdx_x(picbtn).getElementsByTagName_r("li");
var pictxts =
document.getElementByIdx_x(pictxt).getElementsByTagName_r("li");
for(var i = 0; i
< picbtns.length; i++){
picbtns[i].className = "normal";
pictxts[i].className = "normal";
}
}
//当前显示的小图片及图片标题样式
function classCurrent(picbtn,pictxt,n){
var picbtns =
document.getElementByIdx_x(picbtn).getElementsByTagName_r("li");
var pictxts =
document.getElementByIdx_x(pictxt).getElementsByTagName_r("li");
picbtns[n].className =
"current";
pictxts[n].className =
"current";
}
//移动图片
function
movePic(pic,final_x,final_y,interval){
var elem =
document.getElementByIdx_x(pic);
var xpos =
parseInt(elem.style.left);
var ypos =
parseInt(elem.style.top);
if(elem.movement){
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
if (xpos == final_x
&& ypos == final_y) {
return true;
}
//直接将目标位置赋值给图片当前位置。也可以采用以下代码产生动画
//以下代码：按间隔时间、平均移动的距离，缓慢移动图片到目标位置，产生动画效果
var dist;
if(xpos < final_x){
dist =
Math.ceil((final_x - xpos)/10);
xpos +=
dist;
}
if(xpos >
final_x){
dist =
Math.ceil((xpos - final_x)/10);
xpos -=
dist;
}
if(ypos <
final_y){
dist =
Math.ceil((final_y - ypos)/10);
ypos +=
dist;
}
if(ypos >
final_y){
dist =
Math.ceil((ypos - final_y)/10);
ypos -=
dist;
}
elem.style.left = xpos +
"px";
elem.style.top = ypos +
"px";
var repeat = "movePic('" + pic
+ "'," + final_x + "," + final_y + "," + interval + ")";
elem.movement =
setTimeout(repeat,interval);
}
//当鼠标移动到小图片上时切换图片
function changePic(){
if(!document.getElementByIdx_x('picfocus'))
return false;
document.getElementByIdx_x('picfocus').onmouseover =
function(){autokey = true};
document.getElementByIdx_x('picfocus').onmouseout = function(){autokey
= false};
var picbtns =
document.getElementByIdx_x("picbtn").getElementsByTagName_r("li");
var picnums =
picbtns.length;
picbtns[0].onmouseover =
function(){
movePic('pic',0,0,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',0);
}
if(picnums >=
2){
picbtns[1].onmouseover = function(){
movePic('pic',0,-225,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',1);
}
}
if(picnums >=
3){
picbtns[2].onmouseover = function(){
movePic('pic',0,-450,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',2);
}
}
if(picnums >=
4){
picbtns[3].onmouseover = function(){
movePic('pic',0,-675,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',3);
}
}
}
//自动切换图片
var autokey = false;
setInterval('autoChange()',5000);
function autoChange(){
if(autokey) return
false;
var picbtns =
document.getElementByIdx_x("picbtn").getElementsByTagName_r("li");
var len =
picbtns.length;
for(var i = 0; i
< len; i++){
if(picbtns[i].className ==
"current"){
var currentNum = i;
}
}
if(currentNum == 0
&& len >= 1){
movePic('pic',0,-225,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',1);
}
if(currentNum == 1
&& len >= 2){
movePic('pic',0,-450,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',2);
}
if(currentNum == 2
&& len >= 3){
movePic('pic',0,-675,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',3);
}
if(currentNum == 3
&& len >= 4){
movePic('pic',0,0,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',0);
}
}
addEventLoad(changePic);
</script>
<div id="picfocus">
<div
id="piclist">
<div id="pic" style="left:0px;
top:0px;">
<ul>
<li><a href="#"
target="_blank"><img border="0"
alt="" src="images/67345255.jpg"
/></a></li>
<li><a href="#"
target="_blank"><img
border="0" alt="" src="images/67172452.png"
/></a></li>
<li><a href="#"
target="_blank"><img border="0"
alt="" src="images/67349022.jpg"
/></a></li>
加载中…
(2012-05-17 15:57:01)