图片滑动，自适应宽度 自适应显示器宽度

图片滑动，自适应宽度 自适应显示器宽度

 

演示

 

 

XML/HTML Code

1. <div class="wrapper"> <br />  
2. <p>Basic carousel.</p>  
3. <div class="list_carousel">  
4. <ul id="foo0">  
5. <li>c</li>  
6. <li>a</li>  
7. <li>r</li>  
8. <li>o</li>  
9. <li>u</li>  
10. <li>F</li>  
11. <li>r</li>  
12. <li>e</li>  
13. <li>d</li>  
14. <li>S</li>  
15. <li>e</li>  
16. <li>l</li>  
17. <li> </li>  
18. </ul>  
19. <div class="clearfix"></div>  
20. </div>  
21. <br />  
22. <p>Basic carousel + timer, using CSS-transitions.</p>  
23. <div class="list_carousel">  
24. <ul id="foo1">  
25. <li>c</li>  
26. <li>a</li>  
27. <li>r</li>  
28. <li>o</li>  
29. <li>u</li>  
30. <li>F</li>  
31. <li>r</li>  
32. <li>e</li>  
33. <li>d</li>  
34. <li>S</li>  
35. <li>e</li>  
36. <li>l</li>  
37. <li> </li>  
38. </ul>  
39. <div class="clearfix"></div>  
40. <div id="timer1" class="timer"></div>  
41. </div>  
42. <br />  
43. <p>Carousel scrolled by user interaction.<br />  
44. (prev-button, next-button, pagination, mousewheel and swipe)</p>  
45. <div class="list_carousel">  
46. <ul id="foo2">  
47. <li>c</li>  
48. <li>a</li>  
49. <li>r</li>  
50. <li>o</li>  
51. <li>u</li>  
52. <li>F</li>  
53. <li>r</li>  
54. <li>e</li>  
55. <li>d</li>  
56. <li>S</li>  
57. <li>e</li>  
58. <li>l</li>  
59. <li> </li>  
60. </ul>  
61. <div class="clearfix"></div>  
62. <a id="prev2" class="prev" href="#"><</a> <a id="next2" class="next" href="#">></a>  
63. <div id="pager2" class="pager"></div>  
64. </div>  
65. <br />  
66. <p>Carousel with a variable number of visible items with variable sizes.</p>  
67. <div class="list_carousel">  
68. <ul id="foo3">  
69. <li style="width: 50px; height: 50px;">c</li>  
70. <li style="width: 200px; height: 100px;">a</li>  
71. <li style="width: 50px; height: 150px;">r</li>  
72. <li style="width: 50px; height: 200px;">o</li>  
73. <li style="width: 50px; height: 150px;">u</li>  
74. <li style="width: 100px; height: 100px;">F</li>  
75. <li style="width: 250px; height: 50px;">r</li>  
76. <li style="width: 150px; height: 100px;">e</li>  
77. <li style="width: 150px; height: 150px;">d</li>  
78. <li style="width: 50px; height: 200px;">S</li>  
79. <li style="width: 100px; height: 150px;">e</li>  
80. <li style="width: 150px; height: 100px;">l</li>  
81. <li style="width: 200px; height: 50px;"> </li>  
82. </ul>  
83. <div class="clearfix"></div>  
84. <a id="prev3" class="prev" href="#"><</a> <a id="next3" class="next" href="#">></a> </div>  
85. </div>  
86. <br />  
87. <p style="text-align: center;">Responsive layout example resizing the items (resize your browser).</p>  
88. <div class="list_carousel responsive">  
89. <ul id="foo4">  
90. <li>c</li>  
91. <li>a</li>  
92. <li>r</li>  
93. <li>o</li>  
94. <li>u</li>  
95. <li>F</li>  
96. <li>r</li>  
97. <li>e</li>  
98. <li>d</li>  
99. <li>S</li>  
100. <li>e</li>  
101. <li>l</li>  
102. <li> </li>  
103. </ul>  
104. <div class="clearfix"></div>  
105. </div>  
106. <br />  
107. <p style="text-align: center;">Responsive layout example centering the items (resize your browser).</p>  
108. <div class="list_carousel responsive" >  
109. <ul id="foo5">  
110. <li style="width: 300px;">c</li>  
111. <li style="width: 150px;">a</li>  
112. <li>r</li>  
113. <li style="width: 300px;">o</li>  
114. <li style="width: 150px;">u</li>  
115. <li>F</li>  
116. <li style="width: 300px;">r</li>  
117. <li style="width: 150px;">e</li>  
118. <li>d</li>  
119. <li style="width: 400px;">S</li>  
120. <li style="width: 150px;">e</li>  
121. <li>l</li>  
122. <li> </li>  
123. </ul>  
124. <div class="clearfix"></div>  
125. </div>  
126. <br />  
127. <br />  
128. <br />  

 

原文地址:http://www.freejs.net/article_jquerywenzi_262.html