<style>
body{
padding: 0px
margin: 0px
font: 70% verdana, geneva, arial, helvetica, sans-serif
color: #000
text-align: center
}
#outer{
padding: 0px
margin: 0px
width: 800px
text-align: center
}
#focus{
border: #ccc 2px solid
margin: 0px
padding: 0px
padding-top: 15px
background: url(/images/tile.gif) #eee repeat-y left top
width:694px
position: relative
height: 180px
}
#description{
width:550px
height:150px
overflow:hidden
margin-right:15px
float:left
}
.dis{
float:left
width:40px
text-align: center
padding-top:50px
cursor:pointer
}
#description ul, #description li {
float:left
display: inline
margin: 0
padding: 0
height:150px
}
.view_pic a:active,
.view_pic a:visited,
.view_pic a:link {
display: inline
margin: 0
padding: 0
padding-left: 5
padding-right: 5
text-decoration: none
}
.view_pic a:hover {
color: #ffffff
display: inline
text-decoration: none
}
img {border:0px}
</STYLE>
</head>
<body>
<div id=LayerMenu style="display:none z-index: 1000filter: alpha(opacity=0)position: absoluteleft:384pxtop:69pxwidth:126pxheight:20pxborder:1px solid greenbackground:#e11padding:2pxfont-size:12px">抱歉,已经到头了!
</div>
<div id=outer>
<div id=focus>
<div class="dis">
<img id="img_l" src="back.png" alt="向左滚动" onClick="doSlide(-1)" />
</div>
<div id=description>
<div id="view_pic0" style="height:100pxwidth:1650px">
<ul id="view_pic" class=view_pic>
<li><a href="#"><img src="png-0001.png"/></a></li>
<li><a href="#"><img src="png-0002.png"/></a></li>
<li><a href="#"><img src="png-0003.png"/></a></li>
<li><a href="#"><img src="png-0004.png"/></a></li>
<li><a href="#"><img src="png-0005.png"/></a></li>
<li><a href="#"><img src="png-0006.png"/></a></li>
<li><a href="#"><img src="png-0007.png"/></a></li>
<li><a href="#"><img src="png-0008.png"/></a></li>
<li><a href="#"><img src="png-0009.png"/></a></li>
<li><a href="#"><img src="png-0010.png"/></a></li>
<li><a href="#"><img src="png-0011.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
</ul>
</div>
</div>
<div class="dis">
<img id="img_r" src="next.png" alt="向右滚动" onClick="doSlide(1)" />
</div>
</div>
</div>
<script>
var ok_obj=document.getElementById("view_pic").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/3)-1
var ele=document.getElementById("description")
var w=ele.clientWidth
var n=20,t=50
var timers=new Array(n)
var k=0doSlide(0)
function doSlide(s){
if (k>=ok &&s>0|| k<=0 &&s<0)MenuClick()
else{
k+=s
var x=ele.scrollLeft
var d=k*w-x
for(var i=0i<ni++)(
function(){
if(timers[i]) clearTimeout(timers[i])
var j=i
// alert(x)
timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)))},(i+1)*t)
}
)()
}}
</script>
<SCRIPT language=javascript>
var intDelay=30//设置菜单显示速度，越大越慢
var intInterval=5
function MenuClick(){
LayerMenu.filters.alpha.opacity=0
LayerMenu.style.display=""
GradientShow()
}
function GradientShow()
{
LayerMenu.filters.alpha.opacity+=intInterval
if (LayerMenu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)
else setTimeout("GradientClose()",1500)
}
function GradientClose()
{
LayerMenu.filters.alpha.opacity-=intInterval
if (LayerMenu.filters.alpha.opacity>0) {
setTimeout("GradientClose()",intDelay)
}
else {
LayerMenu.style.display="none"
}
}
GradientClose()
</SCRIPT>
