今天写项目的时候看到了一个DIV+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" />  

2.        

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

4.        

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>  

 

 

下载附件