将下面代码中的transitionshow.js引用和body里面(包括body)的代码复制到侧栏自定义内容小工具,即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>随机变换的幻灯片效果</title>
<style type="text/css">

.flashclass{ /*sample CSS class added to image slideshow container*/
width: 200px; /*a width should be defined for transition to work*/
border: 5px solid orange;
padding: 5px;
}

.flashclass img{
border-width: 0;
}

</style>

<script type="text/javascript" src="transitionshow.js">
</script>
</head>
<body>
<script type="text/javascript">

var flashyshow=new flashyslideshow({ //create instance of slideshow
    wrapperid: "myslideshow", //unique ID for this slideshow
    wrapperclass: "flashclass", //desired CSS class for this slideshow
    imagearray: [
        ["summer.jpg", "http://www.sharejs.com", "_new", "Such a nice Summer getaway."],
        ["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],
        ["spring.jpg", "", "", "Flowers spring back to life in Spring."],
        ["autumn.jpg", "", "", "Ah the cool breeze of autumn."]
    ],
    pause: 2000, //pause between content change (millisec)
    transduration: 1000 //duration of transition (affects only IE users)
})

</script>
</body>
</html>

说明:其中这条代码指定了每一个图片路径、链接、目标、描述, 依照这个格式,可以自己添加若干张图片 。

["image_path", "optional_image_link", "optional_link_target", "optional_text_description],

 

源文件下载 -- 代码展示