先完成结构层与表现层部分，做一个纯CSS相册，好让javascript不能动弹时，相册还能运作。过程见《纯CSS相册》，只不过是在它的基础再做了一些优化，更符合人的思路走向，好让下面JS顺产而已。
01.<dl id="album"> 02. <dt> 03. <img id="index1" alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" /> 04. <img id="index2" alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" /> 05. <img id="index3" alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" /> 06. <img id="index4" alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" /> 07. <img id="index5" alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" /> 08. <img id="index6" alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" /> 09. </dt> 10. <dd> 11. <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> 12. </dd> 13.</dl><!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album{/*相册*/
position:relative;
width:400px;
height:300px;
border:10px solid #EFEFDA;/*相册边框*/
}
#album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/
margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/
width:400px;
height:300px;
overflow:hidden;/*重点，让每次只显示一张图片*/
}
#album img {
border:0px;
}
#album dd {/*翻页栏*/
position:absolute;
right:0px;
bottom:10px;
}
#album a {
display:block;/*让其拥有盒子模型*/
float:left;
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album a:hover ,#album a.hover{
color:#F8F8F8;
background-position:0 0;
}
</style>
<h4>javascript图片轮换 by 司徒正美</h4>
<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代码块，键为锚点，值为图片链接。
01.function imageRotater(id){
02. var cases = "",
03. album = document.getElementById(id),
04. images = album.getElementsByTagName("img"),
05. links = album.getElementsByTagName("a"),
06. length = images.length,
07. aIndex = 1,
08. aBefore = length;
09. for(var i=0;i< length;i++){
10. cases += images[i].id + ‘:"‘+images[i].getAttribute("src")+‘",‘
11. }
12. images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片的位置错误问题
13. cases = eval("({"+cases.replace(/,$/,"")+"})"); //相当于switch-case代码块
14. for(var i=0;i<length;i++){ //实现点击切换图片
15. links[i].onclick = function(e){
16. e =e || window.event;
17. var index = this.toString().split("#")[1];
18. aIndex = index.substr(-1);
19. images[0].src = cases[index];
20. !+"\v1" ?(e.returnValue = false) :(e.preventDefault());
21. }
22. }
23. (function(){//实现自动轮换图片
24. setTimeout(function(){
25. if(aIndex > length){
26. aIndex = 1;
27. }
28. images[0].src = cases["index"+aIndex];
29. links[aBefore-1].className = "";
30. links[aIndex-1].className = "hover";
31. aBefore = aIndex;
32. aIndex++;
33. setTimeout(arguments.callee,1500)
34. },1500)
35. })()
36.}
37.window.onload = function(){
38. try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
39. imageRotater("album");
40.}
<!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album{/*相册*/
position:relative;
width:400px;
height:300px;
border:10px solid #EFEFDA;/*相册边框*/
}
#album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/
margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/
width:400px;
height:300px;
overflow:hidden;/*重点，让每次只显示一张图片*/
}
#album img {
border:0px;
}
#album dd {/*翻页栏*/
position:absolute;
right:0px;
bottom:10px;
}
#album a {
display:block;/*让其拥有盒子模型*/
float:left;
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album a:hover ,#album a.hover{
color:#F8F8F8;
background-position:0 0;
}
</style>
<h4>javascript图片轮换 by 司徒正美</h4>
<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>
<script type="text/javascript">
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");
}
</script>
先完成结构层与表现层部分，做一个纯CSS相册，好让javascript不能动弹时，相册还能运作。过程见《纯CSS相册》，只不过是在它的基础再做了一些优化，更符合人的思路走向，好让下面JS顺产而已。
01.<dl id="album">
02. <dt>
03. <img id="index1" alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
04. <img id="index2" alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
05. <img id="index3" alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
06. <img id="index4" alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
07. <img id="index5" alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
08. <img id="index6" alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
09. </dt>
10. <dd>
11. <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>
12. </dd>
13.</dl>
接着下来我们用javascript来修正原来的缺陷和增加一些CSS做不到的能力。主要思路如下：用一个定时不断修改第一个img元素的src属性，实现图片自动播放的功能。取消翻页栏的链接点击时的默认行为，取出当前链接的锚点，并把代入一个哈希对象。这个对象会返回一个图片链接，然后再把它代入到第一个图片的src，实现点时切换图片的功能。因此如何实现这个哈希对象比较关键，它的作用相当于一个switch-case代码块，键为锚点，值为图片链接。
01.function imageRotater(id){
02. var cases = "",
03. album = document.getElementById(id),
04. images = album.getElementsByTagName("img"),
05. links = album.getElementsByTagName("a"),
06. length = images.length,
07. aIndex = 1,
08. aBefore = length;
09. for(var i=0;i< length;i++){
10. cases += images[i].id + ‘:"‘+images[i].getAttribute("src")+‘",‘
11. }
12. images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片的位置错误问题
13. cases = eval("({"+cases.replace(/,$/,"")+"})"); //相当于switch-case代码块
14. for(var i=0;i<length;i++){ //实现点击切换图片
15. links[i].onclick = function(e){
16. e =e || window.event;
17. var index = this.toString().split("#")[1];
18. aIndex = index.substr(-1);
19. images[0].src = cases[index];
20. !+"\v1" ?(e.returnValue = false) :(e.preventDefault());
21. }
22. }
23. (function(){//实现自动轮换图片
24. setTimeout(function(){
25. if(aIndex > length){
26. aIndex = 1;
27. }
, 28. images[0].src = cases["index"+aIndex];
29. links[aBefore-1].className = "";
30. links[aIndex-1].className = "hover";
31. aBefore = aIndex;
32. aIndex++;
33. setTimeout(arguments.callee,1500)
34. },1500)
35. })()
36.}
37.window.onload = function(){
38. try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
39. imageRotater("album");
40.}
我们再增加一个信息栏，用来放置图片的alt值，并让它具有缓动效果。
01. var move = function(el){
02. var begin = parseFloat(el.style.bottom),
03. speed = 1;
04. el.bottom = begin;
05. (function(){
06. setTimeout(function(){
07. el.style.bottom = el.bottom + speed + "px";//移动
08. el.bottom += speed;
09. speed *= 1.5;//下一次移动的距离
10. if(el.bottom >= 0){
11. el.style.bottom = "0px";
12. }else{
13. setTimeout(arguments.callee,25);//每移动一次停留25毫秒
14. }
15. },25)
16. })()
17. }
18.}
至于信息栏，其实只是一个动态生成的dd元素，我们把它插入到第一个dd元素之前，让其绝对定位，就可以用move()函数来移动它了。这些都很基础就不写出来了，看最终效果:
<!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album{/*相册*/
position:relative;
width:400px;
height:300px;
border:10px solid #EFEFDA;/*相册边框*/
overflow:hidden;/*隐藏tip*/
}
#album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/
margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/
width:400px;
height:300px;
overflow:hidden;/*重点，让每次只显示一张图片*/
}
#album img {
border:0px;
}
#album dd {/*翻页栏*/
position:absolute;
right:0px;
bottom:10px;
}
#album a {
display:block;/*让其拥有盒子模型*/
float:left;
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album a:hover ,#album a.hover{
color:#F8F8F8;
background-position:0 0;
}
</style>
<h4>javascript图片轮换 by 司徒正美</h4>
<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>
<script type="text/javascript">
function imageRotater(id){
var cases = "",
album = document.getElementById(id),
images = album.getElementsByTagName("img"),
links = album.getElementsByTagName("a"),
dt = album.getElementsByTagName("dt")[0],
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;";//修正图片的位置错误问题
var tip = document.createElement("dd");
tip.style.cssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
album.insertBefore(tip,dt.nextSibling);
if(!+"\v1"){
tip.style.color = "#369";
tip.style.filter = "alpha(opacity=67)"
}else{
tip.style.cssText += "background: rgba(164, 173, 183, .65);"
}
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];
tip.innerHTML = images[aIndex -1].getAttribute("alt");
!+"\v1" ?(e.returnValue = false) :(e.preventDefault());
}
}
var prefix = images[0].id.substr(0,images[0].id.length -1);
(function(){//实现自动轮换图片
setTimeout(function(){
if(aIndex > length){
aIndex = 1;
}
images[0].src = cases[prefix+aIndex];
tip.innerHTML = images[aIndex -1].getAttribute("alt");
tip.style.bottom = "-40px";
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
aIndex++;
move(tip);
setTimeout(arguments.callee,1500)
},1500)
})()
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)
})()
}
}
window.onload = function(){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
imageRotater("album");
}
</script>
先完成结构层与表现层部分，做一个纯CSS相册，好让javascript不能动弹时，相册还能运作。过程见《纯CSS相册》，只不过是在它的基础再做了一些优化，更符合人的思路走向，好让下面JS顺产而已。
01.<dl id="album">
02. <dt>
03. <img id="index1" alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
04. <img id="index2" alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
05. <img id="index3" alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
06. <img id="index4" alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
07. <img id="index5" alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
08. <img id="index6" alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
09. </dt>
10. <dd>
11. <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>
12. </dd>
13.</dl>
接着下来我们用javascript来修正原来的缺陷和增加一些CSS做不到的能力。主要思路如下：用一个定时不断修改第一个img元素的src属性，实现图片自动播放的功能。取消翻页栏的链接点击时的默认行为，取出当前链接的锚点，并把代入一个哈希对象。这个对象会返回一个图片链接，然后再把它代入到第一个图片的src，实现点时切换图片的功能。因此如何实现这个哈希对象比较关键，它的作用相当于一个switch-case代码块，键为锚点，值为图片链接。
01.function imageRotater(id){
02. var cases = "",
03. album = document.getElementById(id),
04. images = album.getElementsByTagName("img"),
05. links = album.getElementsByTagName("a"),
06. length = images.length,
07. aIndex = 1,
08. aBefore = length;
09. for(var i=0;i< length;i++){
10. cases += images[i].id + ‘:"‘+images[i].getAttribute("src")+‘",‘
11. }
12. images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片的位置错误问题
13. cases = eval("({"+cases.replace(/,$/,"")+"})"); //相当于switch-case代码块
14. for(var i=0;i<length;i++){ //实现点击切换图片
15. links[i].onclick = function(e){
16. e =e || window.event;
17. var index = this.toString().split("#")[1];
18. aIndex = index.substr(-1);
19. images[0].src = cases[index];
20. !+"\v1" ?(e.returnValue = false) :(e.preventDefault());
21. }
22. }
23. (function(){//实现自动轮换图片
24. setTimeout(function(){
25. if(aIndex > length){
26. aIndex = 1;
27. }
28. images[0].src = cases["index"+aIndex];
29. links[aBefore-1].className = "";
30. links[aIndex-1].className = "hover";
31. aBefore = aIndex;
32. aIndex++;
33. setTimeout(arguments.callee,1500)
34. },1500)
35. })()
36.}
37.window.onload = function(){
38. try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
39. imageRotater("album");
40.}
我们再增加一个信息栏，用来放置图片的alt值，并让它具有缓动效果。
01. var move = function(el){
02. var begin = parseFloat(el.style.bottom),
03. speed = 1;
04. el.bottom = begin;
05. (function(){
06. setTimeout(function(){
07. el.style.bottom = el.bottom + speed + "px";//移动
08. el.bottom += speed;
09. speed *= 1.5;//下一次移动的距离
10. if(el.bottom >= 0){
11. el.style.bottom = "0px";
12. }else{ 13. setTimeout(arguments.callee,25);//每移动一次停留25毫秒
14. }
15. },25)
16. })()
17. }
18.}
至于信息栏，其实只是一个动态生成的dd元素，我们把它插入到第一个dd元素之前，让其绝对定位，就可以用move()函数来移动它了。这些都很基础就不写出来了，看最终效果：
我们可以看得出在IE与标准浏览器中，信息栏的样式差别比较大。这是因为标准浏览器支持rgba这种背景透明文字不透明的效果，IE的透明滤镜不支持。想做到相同的效果，IE就要增加多一个元素来装载文字，比较麻烦。有兴趣的朋友可以自己实现一下。
据反应，在运行框2与3中，在IE浏览器下存在问题。我试了一下，果真如此。这是相当隐秘的bug。这问题是当我们点击翻页栏的按钮时，并不会如愿地切换到相应的图片，而是按对象为空的错误。控制图片切换主要是靠如下两条语句：
1.images[0].src = cases[index];
2.//*******略***********
3.images[0].src = cases[prefix+aIndex];
而aIndex是由index计算出来的，经测试获取index的方式是没有问题，能正确获取锚点。
1.links[i].onclick = function(e){
2. e =e || window.event;
3. var index = this.toString().split("#")[1];
4. alert(index);
5. //*********略**********
6.}
因此报错的语句是计算aIndex的语句：
1.links[i].onclick = function(e){
2. e =e || window.event;
3. var index = this.toString().split("#")[1];
4. aIndex = index.substr(-1);//★★罪魁祸首★★
5. //*********略**********
6.}
查了一下，substr方法不符合ECMA标准，不赞成使用。估计问题就出在这里了。我们换成以下方式计算aIndex就没问题了。
1.links[i].onclick = function(e){
2. e =e || window.event;
3. var index = this.toString().split("#")[1];
4. aIndex = index.charAt(index.length-1);//☆☆☆☆
5. //*********略**********
6.}
<!doctype html>
<title>javascript图片轮换 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换 by 司徒正美" />
<meta name="description" content="javascript图片轮换 by 司徒正美" />
<style type="text/css">
#album{/*相册*/
position:relative;
width:400px;
height:300px;
border:10px solid #EFEFDA;/*相册边框*/
overflow:hidden;/*隐藏tip*/
}
#album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/
margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/
width:400px;
height:300px;
overflow:hidden;/*重点，让每次只显示一张图片*/
}
#album img {
border:0px;
}
#album dd {/*翻页栏*/
position:absolute;
right:0px;
bottom:10px;
}
#album a {
display:block;/*让其拥有盒子模型*/
float:left;
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album a:hover ,#album a.hover{
color:#F8F8F8;
background-position:0 0;
}
</style>
<h4>javascript图片轮换 by 司徒正美</h4>
<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>
<script type="text/javascript">
function imageRotater(id){
var cases = "",
album = document.getElementById(id),
images = album.getElementsByTagName("img"),
links = album.getElementsByTagName("a"),
dt = album.getElementsByTagName("dt")[0],
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;";//修正图片的位置错误问题
var tip = document.createElement("dd");
tip.style.cssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
album.insertBefore(tip,dt.nextSibling);
if(!+"\v1"){
tip.style.color = "#369";
tip.style.filter = "alpha(opacity=67)"
}else{
tip.style.cssText += "background: rgba(164, 173, 183, .65);"
}
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.charAt(index.length-1);//☆☆☆☆
images[0].src = cases[index];
tip.innerHTML = images[aIndex -1].getAttribute("alt");
!+"\v1" ?(e.returnValue = false) :(e.preventDefault());
}
}
var prefix = images[0].id.substr(0,images[0].id.length -1);
(function(){//实现自动轮换图片
setTimeout(function(){
if(aIndex > length){
aIndex = 1;
}
images[0].src = cases[prefix+aIndex];
tip.innerHTML = images[aIndex -1].getAttribute("alt");
tip.style.bottom = "-40px";
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
aIndex++;
move(tip);
setTimeout(arguments.callee,1500)
},1500)
})()
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)
})()
}
}
window.onload = function(){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
imageRotater("album");
}
</script>