先前一直烦恼博客园没有自动播放相片的功能,现在终于搞定咯,呵呵,赞自己一个先!
进入管理状态后,在“选项”中“Configure”里,有“”栏(其实就是<head></head>而已)。所以,我们可以在框架里面加入javascript的代码(这一段其实就是李才伟老师位图动画的置换)。
<script language="JavaScript">
var delay = 3000, imageNum = 1, dt = 1000;
var addr=new Array("0056","0258","0253","0260","0248","0167","0170","0200","0203");
var totalnum=9;
var timer=0;
var imgs = new Array();
for(var i = 1; i <=totalnum; i++) {
imgs[i] = new Image();
imgs[i].src = "http://www.cnblogs.com/images/cnblogs_com/dooliuweili/86065/r_IMG"+addr[i]+"A.jpg" ;
}
imgs[totalnum].src = "http://www.cnblogs.com/images/cnblogs_com/dooliuweili/86065/r_IMG0056A.jpg" ;
function animate() { // 改变scr属性,递增图片序号
document.animation.src = imgs[imageNum].src;
imageNum++;
if(imageNum >= totalnum) imageNum =1;
}
function slower() { // 增加延时以放慢动画
delay += dt;
if(delay > 60000) delay = 60000;
}
function faster() { // 减少延时以加快动画
delay -= dt;
if(delay <= 0) delay = 0;
}
function play(){
timer=setInterval("animate() ", delay);
}
function stop(){
clearInterval(timer);
}
timer=setInterval("animate() ", delay);
</script>
var delay = 3000, imageNum = 1, dt = 1000;
var addr=new Array("0056","0258","0253","0260","0248","0167","0170","0200","0203");
var totalnum=9;
var timer=0;
var imgs = new Array();
for(var i = 1; i <=totalnum; i++) {
imgs[i] = new Image();
imgs[i].src = "http://www.cnblogs.com/images/cnblogs_com/dooliuweili/86065/r_IMG"+addr[i]+"A.jpg" ;
}
imgs[totalnum].src = "http://www.cnblogs.com/images/cnblogs_com/dooliuweili/86065/r_IMG0056A.jpg" ;
function animate() { // 改变scr属性,递增图片序号
document.animation.src = imgs[imageNum].src;
imageNum++;
if(imageNum >= totalnum) imageNum =1;
}
function slower() { // 增加延时以放慢动画
delay += dt;
if(delay > 60000) delay = 60000;
}
function faster() { // 减少延时以加快动画
delay -= dt;
if(delay <= 0) delay = 0;
}
function play(){
timer=setInterval("animate() ", delay);
}
function stop(){
clearInterval(timer);
}
timer=setInterval("animate() ", delay);
</script>
然后在新建随笔那边,便可以调用这些函数了。
<img alt=[Animation] src="http://www.cnblogs.com/images/cnblogs_com/dooliuweili/86065/r_IMG0056A.jpg" name=animation> </img><br><br><br>
<form>
<input onclick=play() type=button value=Play> <input onclick=faster() type=button value=Faster> <input onclick=slower() type=button value=Slower> <input onclick=stop() type=button value=Stop>
</form>
<br><br><br>
<form>
<input onclick=play() type=button value=Play> <input onclick=faster() type=button value=Faster> <input onclick=slower() type=button value=Slower> <input onclick=stop() type=button value=Stop>
</form>
<br><br><br>
之所以要在<head></head>中写函数,是因为只有这样才能在主页中就能循环调用animate函数;相反,如果在随笔编辑时才调用循环,那就使得自动播放的功能只在页面从主页切换到此随笔时才会实现。
成果:右边链接“小玩意”--my album