非常不錯的 子鼠 滑動圖片效果 Javascript+CSS

第一步，設計一下我想要的效果！
我用FW把以前作的相簿效果（http://www.jb51.net/blogview.asp?logID=628）改了改，設計一張簡單的！

第二步，布局！ 複製代碼 代碼如下:<div id="imgBox">
<ul>
<li><a href="#"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546382.gif" /></a></li>
<li><a href="#"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546959.gif" /></a></li>
<li><a href="#"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546983.gif" /></a></li>
<li><a href="#"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546145.gif" /></a></li>
<li><a href="#"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546693.gif" /></a></li>

</ul>
</div>

這時可以看一下效果：<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

第三步，設計一下Javascript； 複製代碼 代碼如下:<script>
ScrollImg = function(imgBoxId){
this.imgBoxId = imgBoxId; //拿到圖片最外邊的DIV的ID；
this.table = this.createTable(); //建立了一個一行三列的表格
this.setSpan(); //把圖片上的ALT檔案放在圖片的後邊
this.setOnclick(); //加點擊事件和把內容放在表格中
this.$(this.imgBoxId).appendChild(this.table) //完成全部
}

ScrollImg.prototype = {
$:function(objId){
return document.getElementById(objId);
},
$$:function(n){
return document.createElement(n);
},
createTable:function(){
var table = this.$$('table');
var tr = this.$$('tr');
for(var k=0; k<3; k++) tr.appendChild(this.$$('td'));
var tbody = this.$$('tbody');
tbody.appendChild(tr);
table.appendChild(tbody);
return table;
},
setSpan:function(){
var links = this.$(this.imgBoxId).getElementsByTagName('a');
for(var k=0; k<links.length; k++){
var span = this.$$('span');
span.appendChild(document.createTextNode(links[k].getElementsByTagName('img')[0].alt));
links[k].appendChild(span);
}
return;
},
setOnclick:function (){
var imgArray = ['left', ,'right'];
var tds = this.table.getElementsByTagName('td');
for(var k=0; k<tds.length; k++){
tds[k].setAttribute('vAlign', 'center');
if(k == 1){
var div = this.$$('div');
var ul = this.$(this.imgBoxId).getElementsByTagName('ul')[0];
div.appendChild(ul);
tds[k].appendChild(div);
continue
}

var img = this.$$('img');
img.setAttribute('src', 'http://www.jb51.net/attachments/month_0902/'+imgArray[k]+'.gif');
img.setAttribute('alt', imgArray[k]);
img.style.cursor = 'pointer';
img.onclick = function (){
var imgBox = this.parentNode.parentNode.getElementsByTagName('div')[0];
var ns = imgBox.scrollLeft;
var tkey = 500;
if(this.alt == 'left'){
var left = setInterval(function(){
imgBox.scrollLeft = imgBox.scrollLeft - (tkey * 0.1);
tkey = tkey * 0.9;
if(tkey < 2) clearInterval(left);
},50);
} else {
var right = setInterval(function (){
imgBox.scrollLeft = imgBox.scrollLeft + (tkey * 0.1);
tkey = tkey * 0.9;
if(tkey < 2) clearInterval(right);
},50);
}
return;
}
tds[k].appendChild(img);
}
return;
}
}

var test = new ScrollImg('imgBox');
</script>

這個時候再看一下效果！ xmlns="http://www.w3.org/1999/xhtml">