非常不错的子鼠滑动图片效果Javascript+CSS_图象特效

这时可以看一下效果：
<li><img this is 001" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 002" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 003" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 004" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 005" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 006" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 007" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 008" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 009" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 010" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 011" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 012" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 013" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 014" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 015" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 001" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 002" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 003" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 004" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 005" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 006" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 007" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 008" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 009" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 010" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 011" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 012" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 013" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 014" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 015" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
第三步，设计一下Javascript；
代码如下:

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; kvar 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; ktds[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.gxlcms.com/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');


这个时候再看一下效果！
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.zishu.cn</title> </head> <body> <li><img this is 001" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 002" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 003" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 004" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 005" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 006" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 007" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 008" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 009" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 010" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 011" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 012" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 013" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 014" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 015" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 001" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 002" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 003" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 004" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 005" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 006" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 007" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 008" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 009" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 010" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 011" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 012" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 013" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 014" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 015" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> 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<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 </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
第四步，写CSS来完成计划时的样子！
代码如下:


好了，全部完成，看一下最后的效果吧！
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.zishu.cn</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;} img{ border:0; display:block;vertical-align:middle} #imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;} #imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden} #imgBox,#imgBox ul,#imgBox li{ float:left;} #imgBox ul{ width:4100px;} #imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none} #imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF} #imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;} #imgBox a:hover span{ background:#000; color:#fff} </style> </head> <body> <li><img this is 001" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 002" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 003" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 004" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 005" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 006" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 007" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 008" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 009" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 010" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 011" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 012" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 013" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 014" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 015" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 001" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 002" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 003" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 004" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 005" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 006" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 007" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 008" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 009" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> <li><img this is 010" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546145.gif" /></li> <li><img this is 011" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546693.gif" /></li> <li><img this is 012" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546360.gif" /></li> <li><img this is 013" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546382.gif" /></li> <li><img this is 014" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546959.gif" /></li> <li><img this is 015" src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20090404034546983.gif" /></li> 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<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 </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]