1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>随机变换的幻灯片效果</title>
  6. <style type="text/css">
  8. .flashclass{ /*sample CSS class added to image slideshow container*/
  9. width: 200px; /*a width should be defined for transition to work*/
  10. border: 5px solid orange;
  11. padding: 5px;
  12. }
  14. .flashclass img{
  15. border-width: 0;
  16. }
  18. </style>
  20. <script type="text/javascript" src="transitionshow.js">
  21. </script>
  22. </head>
  23. <body>
  24. <script type="text/javascript">
  26. var flashyshow=new flashyslideshow({ //create instance of slideshow
  27. wrapperid: "myslideshow", //unique ID for this slideshow
  28. wrapperclass: "flashclass", //desired CSS class for this slideshow
  29. imagearray: [
  30. ["summer.jpg", "http://www.sharejs.com", "_new", "Such a nice Summer getaway."],
  31. ["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],
  32. ["spring.jpg", "", "", "Flowers spring back to life in Spring."],
  33. ["autumn.jpg", "", "", "Ah the cool breeze of autumn."]
  34. ],
  35. pause: 2000, //pause between content change (millisec)
  36. transduration: 1000 //duration of transition (affects only IE users)
  37. })
  39. </script>
  40. </body>
  41. </html>

幻灯片切换轮播效果，文件下载：http://pan.baidu.com/s/1sjGzJHV