网页中图片平滑轮换滚动,非flash源代码

效果不错的图片轮换滚动,平滑滚动,可以自己设置图片大小,给图片加链接,说明.

效果见http://www.thefurniturespot.ca/.

XML/HTML代码
  1. <div id="top_pic" style="width:592px; height:348px; padding:0px; margin:0px; border:0px;" >  
  2. <script>  
  3. var NowFrame = 1;   
  4. var MaxFrame = 4;   
  5. var bStart = 0;   
  6. function fnToggle() {   
  7. var next = NowFrame + 1;   
  8. if(next == MaxFrame+1)   
  9. {   
  10.   
  11. NowFrame = MaxFrame;   
  12. next = 1;   
  13. }   
  14. if(bStart == 0)   
  15.   
  16. {   
  17. bStart = 1;   
  18.   
  19. setTimeout('fnToggle()', 1000);   
  20. return;   
  21. }   
  22. else   
  23. {   
  24. oTransContainer.filters[0].Apply();   
  25. document.images['oDIV'+next].style.display = "";   
  26. document.images['oDIV'+NowFrame].style.display = "none";   
  27. oTransContainer.filters[0].Play(duration=2);   
  28. if(NowFrame == MaxFrame)   
  29. NowFrame = 1;   
  30. else   
  31. NowFrame++;   
  32. } setTimeout('fnToggle()', 4000);   
  33. }   
  34. fnToggle();   
  35. </script>  
  36. <div id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion='forward');HEIGHT: 348px; WIDTH: 592px ">  
  37. <a href="javascript:;"><IMG id=oDIV1 style="DISPLAY: none;" src="upfiles/<?=$row['img1']?>" height=348 width=592 border=0 alt="main photo"></A>  
  38. <a href="javascript:;"><img id=oDIV2 style="DISPLAY: none;" src="upfiles/<?=$row['img2']?>" height=348 width=592 border=0 alt="main photo"></a>  
  39. <a href="javascript:;"><img id=oDIV3 style="DISPLAY: none;" src="upfiles/<?=$row['img3']?>" height=348 width=592 border=0 alt="main photo"></a>  
  40. <a href="javascript:;"><img id=oDIV4 style="DISPLAY: none;" src="upfiles/<?=$row['img4']?>" height=348 width=592 border=0 alt="main photo"></a>  
  41.   
  42. </div>  
  43. </div>  

2 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕