首页>>Jquery文字>>图片滑动，自适应宽度 自适应显示器宽度(2014-02-09)

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

图片滑动，自适应宽度 自适应显示器宽度
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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