今天写项目的时候看到了一个DIV+CSS图片切换蛮好的，拿来玩玩-优快云博客

本文介绍了一种使用DIV+CSS实现的图片滚动效果。通过引入特定的JS文件（如tb.js），配合CSS样式设置，可以轻松实现在网页上展示多张图片的滚动播放效果。该教程详细说明了如何配置样式及引入必要的脚本。

DIV+CSS图片滚动效果

不知道是什么技术实现的就知道js文件里面有个YAHOO，不知道是不是YAHOOUI，js名字叫tb.js还望知道的人告诉我是什么组件。呵呵~~~嘻嘻嘻

这是我在自己写的一个项目里用到的，看到这个蛮好的，所以拿过来跟大家分享一下，感觉比我自己写的好多了，也没研究里面的代码，以后有时间在研究研究吧，最近也比较忙，项目不叫多，不管那么多，先告诉大家怎么用吧，在告诉大家之前还是贴几个图：

上面是截图了，呵呵，效果还不错吧。

首先加入下面两个js代码，这两个文件代码太多，不贴出来了，附件里都有

接着加入

1.DIV#MainPromotionBanner

2.{

3. float:left;

4. background: #ffffff;

5. width: 382px;

6. height: 226px;

7.}

8.#MainPromotionBanner #SlidePlayer

9.{

10. margin: 0px auto;

11. position: relative;

12. }

13. #MainPromotionBanner .Slides

14. {

15. padding-right: 0px;

16. padding-left: 0px;

17. padding-bottom: 0px;

18. margin: 0px;

19. overflow: hidden;

20. padding-top: 0px;

21. list-style-type: none;

22. height: 226px;

23. }

24. #MainPromotionBanner .Slides LI

25. {

26. float: left;

27. width: 382px;

28. height: 226px;

29. }

30. #MainPromotionBanner .Slides IMG

31. {

32. border-top-width: 0px;

33. display: block;

34. border-left-width: 0px;

35. border-bottom-width: 0px;

36. width: 382px;

37. height: 226px;

38. border-right-width: 0px;

39. }

40. #MainPromotionBanner .SlideTriggers

41. {

42. padding-right: 0px;

43. padding-left: 0px;

44. z-index: 10;

45. rightright: 0px;

46. padding-bottom: 0px;

47. margin: 0px;

48. padding-top: 0px;

49. list-style-type: none;

50. position: absolute;

51. top: 206px;

52. height: 20px;

53. }

54. #MainPromotionBanner .SlideTriggers LI

55. {

56. display: inline;

57. font-size: 0.9em;

58. background: url(images/slide_trigger.gif) no-repeat center center;

59. float: left;

60. margin: 3px 6px;

61. overflow: hidden;

62. width: 16px;

63. cursor: pointer;

64. color: #74a8ed;

65. line-height: 16px;

66. font-family: Arial;

67. height: 16px;

68. text-align: center;

69. }

70. #MainPromotionBanner .SlideTriggers LI.Current

71. {

72. border-top-width: 0px;

73. font-weight: bold;

74. border-left-width: 0px;

75. font-size: 1.4em;

76. background: url(images/slide_trigger_c.gif) no-repeat center center;

77. border-bottom-width: 0px;

78. margin: 0px 6px;

79. width: 21px;

80. color: #fff;

81. line-height: 21px;

82. height: 21px;

83. border-right-width: 0px;

84. }

在html>Head中加入

1. <link href="banner.css" rel="stylesheet" type="text/css" />

3. <script src="js/yu.js" type="text/javascript"></script>

5. <script src="js/tb.js" type="text/javascript"></script>

在html>Body中加入

1. <div id="MainPromotionBanner">

2. <div id="SlidePlayer">

3. <ul class="Slides">

4. <li>

5. <img height="312" src="images/banner12.jpg" width="624">

6. </li>

7. <li>

8. <img height="312" src="images/banner11.jpg" width="624">

9. </li>

10. <li>

11. <img height="312" src="images/banner0409.jpg" width="624">

12. </li>

13. <li>

14. <img height="312" src="images/banner0410.jpg" width="624">

15. </li>

16. </ul>

17. </div>

18. </div>

19.

20. <script type="text/javascript">

21. TB.widget.SimpleSlide.decoration('SlidePlayer', { eventType: 'mouse', effect: 'scroll' });

22. </script>

下载附件

转载于:https://www.cnblogs.com/jimtomjim/archive/2009/05/23/Div_CSS.html