建议搜索js相册效果自己写效果一般不稳定。
解决方案 »
- WKTouch.js问题
- 怎么用jquery取iframe内容?
- js文件太多,想替换变量名,请教如何替换?
- 请问可以用根据option的值还访问select的选项吗?
- javascript 可以让IE的还原键变成不可选的状态吗?在线等!
- 菜鸟求助:下载文本文件后,页面不响应任何操作。报javascript error,对象拒绝访问。
- 急!求不间断滚动的代码,最好短一点的
- 救命啊,简单的正则出现问题!
- 请问如何在服务器端的Jscript 中 判断一个session 变量存不存在?
- 如何实现一个onclick(),使在页面制定的地方显示制定的内容!!!
- 鼠标放在链结上,显示相关图片
- 这问题估计无数人提过,我不知道想问一次
如果发现bug 帮忙告诉我一下 下面小图的图片放多了,可以减少7张,这个是后来想通的,但是懒得改了
<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 style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" onclick="Forward()" /><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" onclick="Forward()" /><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" onclick="Forward()" /><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" onclick="Forward()" /><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" onclick="Forward()"/><img style="cursor:pointer" src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" onclick="Forward()"/>
</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>