这个实现步骤
1：在商品上传时，程序应同步抓取商品图片作为缩略图存到对应商品表缩略图字段中
2：在搜索款检索商品关键词，实时使用ajax去请求符合的商品并返回商品相关信息（含缩略图）
3：ajax返回商品数据后【应是对象数组】，然后循环显示即可
<%function pagenum(page,pagesum,actcs)
if cint(page)>10 then
ks=page-5
js=page+5
if ks<1 then
ks=1
js=ks+10
end if
if js>cint(pagesum) then
js=pagesum
ks=js-10
end if
else
if cint(pagesum)>11 then
ks=1
js=11
else
ks=1
js=pagesum
end if
end if
if page<>1 then
response.Write("<a href='" &actcs &"1'>首页</a><a href='" &actcs &page-1 &"'>上一页</a>")
else
response.Write("首页 上一页 ")
end if
for i= ks to js
if i<10 then
if cint(i)=cint(page) then
response.Write("<font color='#FF0000'>0"&i &"</font>")
else
response.Write("<a href='" &actcs &i &"'>0"&i &"</a>")
end if
else
if cint(i)=cint(page) then
response.Write("<font color='#FF0000'>"&i &"</font>")
else
response.Write("<a href='" &actcs &i &"'>"&i &"</a>")
end if
end if
next
if cint(page)<cint(pagesum) then
response.Write("<a href='" &actcs &page+1 &"'>下一页</a><a href='" &actcs &pagesum &"'>尾页</a>")
else
response.Write("下一页 尾页 ")
end if
end function
%>
<%
sclass_id=cint(rs("sclass_id"))
set rs=server.CreateObject ("ADODB.RecordSet")
rs.Source="select * from products where sclass_id="&sclass_id
rs.Open rs.source,conn,3,3
%>
<table width="100%" border="0" cellspacing="2" cellpadding="1">
<tr>
<%while not rs.eof
i=i+1%>
<td><div align="center">
<p>
<a href="views.asp?hw_id=<%=rs("hw_id")%>"><img border="0" src="../<%pic=split(rs("hw_pic"),"*")%><%=pic(1)%>" title="<%=rs("hw_name")%>"/ width="160" height="120" class="pic"></a>
</p>
<p><a href="views.asp?hw_id=<%=rs("hw_id")%>"class="leftmenu_5"><%=rs("hw_name")%></a></p>
<p><%=rs("material")%></p>
<p><a href="views.asp?hw_id=<%=rs("hw_id")%>"class="leftmenu_3"><%=rs("hw_sn")%></a><input type="checkbox" Name="cpbm" value="<%=rs("hw_id")%>"></p>
</td>
<%
if i mod 4=0 then Response.Write("</tr><tr>")
rs.movenext
wend %>
</tr>
</table>
<%
rs.close
'set rs=nothing
'conn.close
'set conn=nothing %>
<% call PageNum(1,PageSum,"页面的名字?id=1&page=") %>
<!DOCTYPE HTML><html>
<head>
<meta charset="gbk">
<title>同页面多方向的图片滚动，面向对象</title>
<style>
div,h2,ul,li,img,span{margin:0padding:0}
li{list-style:none}
/*layout*/
.wrapper{width:960pxmargin:0 auto}
.prize{width:960pxmargin:20px autoposition:relativebackground:#f6f4f2font:12px Tahoma,sans-serifborder:1px solid #cccpadding:1pxcolor:#052d30}
/*title*/
.prize h2{height:25pxfont:bold 14px/25px Tahomabackground:#0cftext-indent:10pxtext-shadow:1px 1px 1px #fff}
/*content*/
.prize-con{width:900pxmargin:0 autoheight:128pxoverflow:hiddenpadding:10px 0position:relative}
.prize-con ul{width:200%position:absolute}
.prize-con li{float:left_display:inlineline-height:25pxtext-align:centermargin-right:5px}
.prize-con li img{width:141pxheight:110pxdisplay:blockborder:1px solid #cccpadding:1px}
.block2{width:220pxmargin:0}
.block2 .prize-con{width:150pxheight:410pxpadding:0margin:10px auto}
.block2 ul{width:auto}
.block2 li{float:none}
/*button*/
.prize span{display:blockposition:absolutetop:50%width:13pxheight:15pxbackground:#000 url(bun-bg.jpg) no-repeat 0 0cursor:pointer}
span.l-bun{left:5px}
span.r-bun{background-position:0 -15pxright:10px}
</style>
</head>
<body>
<div class="wrapper">
<!--block1-->
<div class="prize">
<h2>奖品展示</h2>
<div class="prize-con dd">
<ul>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题1</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题2</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题3</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题4</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题5</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题6</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题7</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题8</li>
</ul>
</div>
<span class="l-bun"></span>
<span class="r-bun"></span>
</div>
<!--block2-->
<div class="prize block2">
<h2>奖品展示</h2>
<div class="prize-con dd">
<ul>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题1</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题2</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题3</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题4</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题5</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题6</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题7</li>
<li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题8</li>
</ul>
</div>
<span class="l-bun"></span>
<span class="r-bun"></span>
</div>
</div>
<script>
//find elements
_get = function(e,c){
var _isClass = e.indexOf(".")>=0,_isId = e.indexOf("#")>=0,newEle = e.substring(1)
//get frist argument
if(_isClass&&_isId) return
if(_isId){
var obj = typeof newEle=="string"?document.getElementById(newEle):false
}else if(_isClass){
var obj = _class(e)
}else{
return
}
//get class
function _class(c,o){
var oDom = o?o:document,
cParent = oDom.getElementsByTagName("*"),
classAry = [],
leng = cParent.length
for(var i=0i<lengi++){
allC = cParent[i].className
if(allC.match("\\b"+newEle+"(?:$|[^\w\-])")){
classAry.push(cParent[i])
}
}
return classAry.length==1?classAry[0]:classAry
}
//second argument
var _isArr = obj.constructor==Array
if(!!c){
if(_isArr){
for(var j=0,len=obj.lengthj<lenj++){
var ele = obj[j].getElementsByTagName(c)
obj[j] = ele.length==1?ele[0]:ele
}
}else{
obj = obj.getElementsByTagName(c)
}
}
return obj.length==1?obj[0]:obj
}
//even
function Roll(){this.initial.apply(this,arguments)}
Roll.prototype = {
initial:function(o,l,r,s){
var _this = this
this.obj = o
this.child = o.children
this.timeId = null
this.interval = null
this.funTime = null
this.set(s||{})
this.oAttr = !!this.s.dir?this.child[0].offsetHeight:this.child[0].offsetWidth
this.dirNo = !!this.s.dir?"top":"left"
l.onclick = function(){_this.prev()_this.s.auto = false}
r.onclick = function(){_this.next()_this.s.auto = false}
o.onmouseover = function(){_this.s.auto = falseclearInterval(_this.funTime)}
this.s.auto&&(this.next(),o.onmouseout = l.onmouseout = r.onmouseout = function(){_this.funTime = setTimeout(function(){_this.s.auto = true_this.next()},500)})
},
set:function(v){
this.s = {
dir:0,//滚动方向，0为横向滚动，1为纵向滚动
auto:true//是否自动滚动
}
for(c in v){this.s[c] = v[c]}
},
prev:function(){
this.obj.insertBefore(this.child[this.child.length-1],this.obj.firstChild)
this.obj.style[this.dirNo] = -this.oAttr+"px"
this.moverIt(0)
},
next:function(){
this.moverIt(-this.oAttr,function(){
var dir = !!this.s.dir?"top":"left"
this.obj.appendChild(this.child[0])
this.obj.style[this.dirNo] = 0
})
},
moverIt:function(i,callBack){
var _this = this
clearInterval(this.timerId)
clearInterval(_this.funTime)
clearInterval(this.interval)
this.timerId = setInterval(function(){
var dir = !!_this.s.dir?_this.obj.offsetTop:_this.obj.offsetLeft,
iSpeed = (i-dir)/5
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
dir==i?(clearInterval(_this.timerId),callBack&&callBack.apply(_this),!!_this.s.auto&&(_this.interval=setTimeout(function(){_this.next()},1500))):_this.obj.style[_this.dirNo] = iSpeed + dir + "px"
},30)
}
}
//marquee
var menu = _get(".prize-con","ul"),lBun = _get(".l-bun"),rBun = _get(".r-bun")
for(var i=0,leng=menu.lengthi<lengi++){
var mq = new Roll(menu[i],lBun[i],rBun[i],{dir:i%2?1:0}),mq = null//实例化，当板块为偶数的时候像左边滚动，反之向上
}
</script>
</body>
</html>
