图片上下滑动的效果 给你一个参考 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 现在上下是好了但是请问下怎么左右动啊想163相册那种的 折腾了一个晚上.. IE only 兼容行还没怎么系统的学过.. 应该还有bug没测试出来....<style type="text/css"><!--#top{background-color:#EBEBEB;height:30px;width:560px;padding:5px 0 0 25px;}#center{background:#F4F4F4;width:560px;height:376px;padding:5px;}#contain{background:#F4F4F4;width:550px;height:366px;overflow: hidden;}#a{width:5000px;height:366px;}#bottom{background:#EBEBEB;height:60px;width:560px;}#bl{height:60px;width:22px;float:left;}#bb{height:60px;width:515px;float:left;padding:5px;}#bcontain{height:50px;width:500px;overflow: hidden;}#b{height:50px;width:4000px;}#br{height:60px;width:19px;}.tu{height:50px; width:100px; float:left; text-align:center; cursor:pointer;filter:Alpha(opacity=30);}--></style><div id="top"></div><div id="center"><div id="contain"> <div id="a"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" /></div></div></div><div id="bottom"><div id="bl"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165259893.t.gif" onclick="Back()" style="cursor:hand;" /></div><div id="bb"><div id="bcontain"><div id="b"><div class="tu" style="filter:Alpha(opacity=100)"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()" /></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div><div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div></div></div></div><div id="br"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165005229.t.gif" onclick="Forward()" style="cursor:hand;" ></div></div><script>var contain = document.getElementById("contain")var bcontain = document.getElementById("bcontain")var cun =0function Forward(){if(contain.scrollLeft>7*550)contain.scrollLeft=contain.scrollLeft-7*550if(bcontain.scrollLeft>7*100)bcontain.scrollLeft=bcontain.scrollLeft-700for(i=0;i<50;i++){bcontain.scrollLeft=bcontain.scrollLeft+2contain.scrollLeft=contain.scrollLeft+11}document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"cun=bcontain.scrollLeft/100document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"}function Back(){if(contain.scrollLeft==0)contain.scrollLeft=7*550if(bcontain.scrollLeft==0)bcontain.scrollLeft=7*100for(i=0;i<50;i++){bcontain.scrollLeft=bcontain.scrollLeft-2contain.scrollLeft=contain.scrollLeft-11}document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"cun=bcontain.scrollLeft/100document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"}function move(e){document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"e =e||eventvar num=0var img = document.getElementById("b").getElementsByTagName("img")for(var i=0;i<img.length;i++) {if(img[i]==e.srcElement) {num=i;break}}if(num<=13){ if(bcontain.scrollLeft==num*100) {return} else { var pan =num-bcontain.scrollLeft/100 for(i=0;i<50*pan;i++){if(contain.scrollLeft==7*550)contain.scrollLeft=0bcontain.scrollLeft=bcontain.scrollLeft+2contain.scrollLeft=contain.scrollLeft+11}}}if(num>13){num=num-7bcontain.scrollLeft=bcontain.scrollLeft-7*100if(bcontain.scrollLeft==num*100) {return} else { var pan =num-bcontain.scrollLeft/100 for(i=0;i<50*pan;i++){if(contain.scrollLeft==7*550)contain.scrollLeft=0bcontain.scrollLeft=bcontain.scrollLeft+2contain.scrollLeft=contain.scrollLeft+11}}}cun=bcontain.scrollLeft/100document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"}</script> 麻烦高手帮忙,EXTJS如何实现下面的选项卡 如何将下面的xml文件转换成json格式??急 紧急求救,求一段js代码 正则表达式排除xx js中参数如何传递 如何取得父窗口的URL 请教关于脚本控制 select 的问题。 关于下载的问题 如何控制Input Text的光标的位置 js中如何调用asp??急 关闭 模态窗口的问题 请教 关于区分单击和双击的问题
<style type="text/css">
<!--
#top{background-color:#EBEBEB;height:30px;width:560px;padding:5px 0 0 25px;}
#center{background:#F4F4F4;width:560px;height:376px;padding:5px;}
#contain{background:#F4F4F4;width:550px;height:366px;overflow: hidden;}
#a{width:5000px;height:366px;}
#bottom{background:#EBEBEB;height:60px;width:560px;}
#bl{height:60px;width:22px;float:left;}
#bb{height:60px;width:515px;float:left;padding:5px;}
#bcontain{height:50px;width:500px;overflow: hidden;}
#b{height:50px;width:4000px;}
#br{height:60px;width:19px;}
.tu{height:50px; width:100px; float:left; text-align:center; cursor:pointer;filter:Alpha(opacity=30);}
-->
</style><div id="top"></div><div id="center">
<div id="contain">
<div id="a">
<img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" />
</div>
</div>
</div><div id="bottom">
<div id="bl"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165259893.t.gif" onclick="Back()" style="cursor:hand;" /></div>
<div id="bb">
<div id="bcontain">
<div id="b">
<div class="tu" style="filter:Alpha(opacity=100)"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()" /></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div>
<div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div>
</div>
</div>
</div>
<div id="br"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165005229.t.gif" onclick="Forward()" style="cursor:hand;" ></div>
</div><script>
var contain = document.getElementById("contain")
var bcontain = document.getElementById("bcontain")
var cun =0
function Forward(){
if(contain.scrollLeft>7*550)
contain.scrollLeft=contain.scrollLeft-7*550
if(bcontain.scrollLeft>7*100)
bcontain.scrollLeft=bcontain.scrollLeft-700
for(i=0;i<50;i++)
{bcontain.scrollLeft=bcontain.scrollLeft+2
contain.scrollLeft=contain.scrollLeft+11}
document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"
cun=bcontain.scrollLeft/100
document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"
}function Back(){
if(contain.scrollLeft==0)
contain.scrollLeft=7*550
if(bcontain.scrollLeft==0)
bcontain.scrollLeft=7*100
for(i=0;i<50;i++)
{
bcontain.scrollLeft=bcontain.scrollLeft-2
contain.scrollLeft=contain.scrollLeft-11}
document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"
cun=bcontain.scrollLeft/100
document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"
}function move(e){
document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"
e =e||event
var num=0
var img = document.getElementById("b").getElementsByTagName("img")
for(var i=0;i<img.length;i++)
{if(img[i]==e.srcElement)
{num=i;break}}if(num<=13)
{
if(bcontain.scrollLeft==num*100)
{return}
else
{
var pan =num-bcontain.scrollLeft/100
for(i=0;i<50*pan;i++)
{if(contain.scrollLeft==7*550)
contain.scrollLeft=0
bcontain.scrollLeft=bcontain.scrollLeft+2
contain.scrollLeft=contain.scrollLeft+11}}
}if(num>13)
{
num=num-7
bcontain.scrollLeft=bcontain.scrollLeft-7*100
if(bcontain.scrollLeft==num*100)
{return}
else
{
var pan =num-bcontain.scrollLeft/100
for(i=0;i<50*pan;i++)
{if(contain.scrollLeft==7*550)
contain.scrollLeft=0
bcontain.scrollLeft=bcontain.scrollLeft+2
contain.scrollLeft=contain.scrollLeft+11}}
}cun=bcontain.scrollLeft/100
document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"
}
</script>