非常不错的 子鼠 滑动图片效果 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>

这时可以看一下效果：
































































































[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>

这个时候再看一下效果！





www.zishu.cn


































































































ScrollImg = function(imgBoxId){
this.imgBoxId = imgBoxId;
this.table = this.createTable();
this.imgBoxP = this.$(this.imgBoxId).parentNode;
this.setSpan();
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