请高手看看图片滚动的问题。

redhousecj 2012-05-15 05:19:43

其实下面的内容是我从凤凰网图片新闻里截取出来的。我要弄个类似的图片管理。
大家也可以看下凤凰网里的效果：http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml。我就想要下面有小图片预览的区域。我截取出来，但是不能滚动和点击。请高手看看
tpshow.htm

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<link href="x_img/cssphoto.css" rel="stylesheet" type="text/css">
</head>

<body>
<SCRIPT type=text/javascript src="x_img/slide.hd.js"></SCRIPT>
<DIV class=photoList>
<DIV class=before><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/14/14504677_0.shtml"
target=_blank><IMG
src="x_img/test/11.jpg"
width=106 height=70></A>
<P><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/14/14504677_0.shtml"
target=_blank><< 上一图集</A></P></DIV>
<DIV class=picList>
<DIV class=l1><IMG id=scrollleft
src="x_img/icon_28.gif" width=22 height=58></DIV>
<DIV class=l2>
<DIV style="POSITION: relative" class=listM>
<UL style="POSITION: absolute; WIDTH: 1180px; LEFT: 0px" id=scrollcontent>
<LI><A href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_0.shtml"><IMG
src="x_img/test/1.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_1.shtml"><IMG
src="x_img/test/2.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_2.shtml"><IMG
src="x_img/test/3.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_3.shtml"><IMG
src="x_img/test/4.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_4.shtml"><IMG
src="x_img/test/5.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_5.shtml"><IMG
src="x_img/test/6.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_6.shtml"><IMG
src="x_img/test/7.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_7.shtml"><IMG
src="x_img/test/8.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_8.shtml"><IMG
src="x_img/test/9.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_9.shtml"><IMG
src="x_img/test/10.jpg"
width=106 height=70></A> </LI></UL></DIV>
<DIV class=scrollBar>
<DIV style="VISIBILITY: visible; LEFT: 0px" id=scrollbar class=drag><IMG
src="x_img/icon_39.gif" width=162 height=19></DIV></DIV></DIV>
<DIV class=l3><IMG id=scrollright
src="x_img/icon_31.gif" width=22
height=58></DIV></DIV>
<DIV class=after><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml"
target=_blank><IMG
src="x_img/test/15.jpg"
width=106 height=70></A>
<P><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml"
target=_blank>下一图集 >></A></P></DIV>
<DIV class=clear></DIV></DIV>
</body>

</html>

slide.hd.js

var Drag={
obj: null,
leftTime: null,
rightTime: null,
init: function (o,minX,maxX,btnRight,btnLeft) {
o.onmousedown=Drag.start;
o.hmode=true;
if(o.hmode&&isNaN(parseInt(o.style.left))) { o.style.left="0px"; }
if(!o.hmode&&isNaN(parseInt(o.style.right))) { o.style.right="0px"; }
o.minX=typeof minX!='undefined'?minX:null;
o.maxX=typeof maxX!='undefined'?maxX:null;
o.onDragStart=new Function();
o.onDragEnd=new Function();
o.onDrag=new Function();
btnLeft.onmousedown=Drag.startLeft;
btnRight.onmousedown=Drag.startRight;
btnLeft.onmouseup=Drag.stopLeft;
btnRight.onmouseup=Drag.stopRight;
},
start: function (e) {
var o=Drag.obj=this;
e=Drag.fixE(e);
var x=parseInt(o.hmode?o.style.left:o.style.right);
o.onDragStart(x);
o.lastMouseX=e.clientX;
if(o.hmode) {
if(o.minX!=null) { o.minMouseX=e.clientX-x+o.minX; }
if(o.maxX!=null) { o.maxMouseX=o.minMouseX+o.maxX-o.minX; }
} else {
if(o.minX!=null) { o.maxMouseX= -o.minX+e.clientX+x; }
if(o.maxX!=null) { o.minMouseX= -o.maxX+e.clientX+x; }
}
document.onmousemove=Drag.drag;
document.onmouseup=Drag.end;
return false;
},
drag: function (e) {
e=Drag.fixE(e);
var o=Drag.obj;
var ex=e.clientX;
var x=parseInt(o.hmode?o.style.left:o.style.right);
var nx;
if(o.minX!=null) { ex=o.hmode?Math.max(ex,o.minMouseX):Math.min(ex,o.maxMouseX); }
if(o.maxX!=null) { ex=o.hmode?Math.min(ex,o.maxMouseX):Math.max(ex,o.minMouseX); }
nx=x+((ex-o.lastMouseX)*(o.hmode?1:-1));
$("scrollcontent").style[o.hmode?"left":"right"]=(-nx*barUnitWidth)+"px";
Drag.obj.style[o.hmode?"left":"right"]=nx+"px";
Drag.obj.lastMouseX=ex;
Drag.obj.onDrag(nx);
return false;
},
startLeft: function () {
Drag.leftTime=setInterval("Drag.scrollLeft()",1);
},
scrollLeft: function () {
var c=$("scrollcontent");
var o=$("scrollbar");
if((parseInt(o.style.left.replace("px",""))<(590-162-10))&&(parseInt(o.style.left.replace("px",""))>=0)) {
o.style.left=(parseInt(o.style.left.replace("px",""))+1)+"px";
c.style.left=(-(parseInt(o.style.left.replace("px",""))+1)*barUnitWidth)+"px";
} else {
Drag.stopLeft();
}
},
stopLeft: function () {
clearInterval(Drag.leftTime);
},
startRight: function () {
Drag.rightTime=setInterval("Drag.scrollRight()",1);
},
scrollRight: function () {
var c=$("scrollcontent");
var o=$("scrollbar");
if((parseInt(o.style.left.replace("px",""))<=(590-162-10))&&(parseInt(o.style.left.replace("px",""))>0)) {
o.style.left=(parseInt(o.style.left.replace("px",""))-1)+"px";
c.style.left=(-(parseInt(o.style.left.replace("px",""))-1)*barUnitWidth)+"px";
} else {
Drag.stopRight();
}
},
stopRight: function () {
clearInterval(Drag.rightTime);
},
end: function () {
document.onmousemove=null;
document.onmouseup=null;
Drag.obj.onDragEnd(parseInt(Drag.obj.style[Drag.obj.hmode?"left":"right"]));
Drag.obj=null;
},
fixE: function (e) {
if(typeof e=='undefined') { e=window.event; }
if(typeof e.layerX=='undefined') { e.layerX=e.offsetX; }
return e;
}
};
var scrollbar = $('scrollbar');
var scrollleft = $('scrollleft');
var scrollright = $('scrollright');
if(scrollbar&&scrollright){
Drag.init(scrollbar,0,418,scrollleft,scrollright);
}
function hideRecommended() {
($("tab").style.display=="none")?($("tab").style.display=""):($("tab").style.display="none");
($("tab").style.display=="none")?($("hidebar").style.backgroundImage="url(http://img.ifeng.com/hdslide/icon_46.gif)"):($("hidebar").style.backgroundImage="url(http://img.ifeng.com/hdslide/icon_47.gif)");
}

...全文