将下面代码中的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],
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4108.html
