先完成结构层与表现层部分，做一个纯CSS相册，好让JS不能动弹时，相册还能运作。过程见《纯CSS相册》，只不过是在它的基础再做了一些优化，更符合人的思路走向，好让下面JS顺产而已。
<dl id="album"> |
<dt> |
<img id="index1" alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" /> |
<img id="index2" alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" /> |
<img id="index3" alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" /> |
<img id="index4" alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" /> |
<img id="index5" alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" /> |
<img id="index6" alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" /> |
</dt> |
<dd> |
<a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a><a href="#index4">4</a><a href="#index5">5</a><a href="#index6">6</a> |
</dd> |
</dl> |
接着下来我们用javascript来修正原来的缺陷和增加一些CSS做不到的能力。主要思路如下：用一个定时不断修改第一个img元素的src属性，实现图片自动播放的功能。取消翻页栏的链接点击时的默认行为，取出当前链接的锚点，并把代入一个哈希对象。这个对象会返回一个图片链接，然后再把它代入到第一个图片的src，实现点时切换图片的功能。因此如何实现这个哈希对象比较关键，它的作用相当于一个switch-case代码块，键为锚点，值为图片链接。
function imageRotater(id){ |
var cases = "", |
album = document.getElementById(id), |
images = album.getElementsByTagName("img"), |
links = album.getElementsByTagName("a"), |
length = images.length, |
aIndex = 1, |
aBefore = length; |
for(var i=0;i< length;i++){ |
cases += images[i].id + ':"'+images[i].getAttribute("src")+'",' |
} |
images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片的位置错误问题 |
cases = eval("({"+cases.replace(/,$/,"")+"})"); //相当于switch-case代码块 |
for(var i=0;i<length;i++){ //实现点击切换图片 |
links[i].onclick = function(e){ |
e =e || window.event; |
var index = this.toString().split("#")[1]; |
aIndex = index.substr(-1); |
images[0].src = cases[index]; |
!+"\v1" ?(e.returnValue = false) :(e.preventDefault()); |
} |
} |
(function(){//实现自动轮换图片 |
setTimeout(function(){ |
if(aIndex > length){ |
aIndex = 1; |
} |
images[0].src = cases["index"+aIndex]; |
links[aBefore-1].className = ""; |
links[aIndex-1].className = "hover"; |
aBefore = aIndex; |
aIndex++; |
setTimeout(arguments.callee,1500) |
},1500) |
})() |
} |
window.onload = function(){ |
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; |
imageRotater("album"); |
} |
我们再增加一个信息栏，用来放置图片的alt值，并让它具有缓动效果。
var move = function(el){ |
var begin = parseFloat(el.style.bottom), |
speed = 1; |
el.bottom = begin; |
(function(){ |
setTimeout(function(){ |
el.style.bottom = el.bottom + speed + "px";//移动 |
el.bottom += speed; |
speed *= 1.5;//下一次移动的距离 |
if(el.bottom >= 0){ |
el.style.bottom = "0px"; |
}else{ |
setTimeout(arguments.callee,25);//每移动一次停留25毫秒 |
} |
},25) |
})() |
} |
} |
至于信息栏，其实只是一个动态生成的dd元素，我们把它插入到第一个dd元素之前，让其绝对定位，就可以用move()函数来移动它了。这些都很基础就不写出来了，看最终效果：
我们可以看得出在IE与标准浏览器中，信息栏的样式差别比较大。这是因为标准浏览器支持rgba这种背景透明文字不透明的效果，IE的透明滤镜不支持。想做到相同的效果，IE就要增加多一个元素来装载文字，比较麻烦。有兴趣的朋友可以自己实现一下。
据反应，在运行框2与3中，在IE浏览器下存在问题。我试了一下，果真如此。这是相当隐秘的bug。这问题是当我们点击翻页栏的按钮时，并不会如愿地切换到相应的图片，而是按对象为空的错误。控制图片切换主要是靠如下两条语句：
images[0].src = cases[index]; |
//*******略*********** |
images[0].src = cases[prefix+aIndex]; |
而aIndex是由index计算出来的，经测试获取index的方式是没有问题，能正确获取锚点。
links[i].onclick = function(e){ |
e =e || window.event; |
var index = this.toString().split("#")[1]; |
alert(index); |
//*********略********** |
} |
因此报错的语句是计算aIndex的语句：
links[i].onclick = function(e){ |
e =e || window.event; |
var index = this.toString().split("#")[1]; |
aIndex = index.substr(-1);//★★罪魁祸首★★ |
//*********略********** |
} |
查了一下，substr方法不符合ECMA标准，不赞成使用。估计问题就出在这里了。我们换成以下方式计算aIndex就没问题了。
links[i].onclick = function(e){ |
e =e || window.event; |
var index = this.toString().split("#")[1]; |
aIndex = index.charAt(index.length-1);//☆☆☆☆ |
//*********略********** |
} |