首页>>Jquery文字>>无图片滑动 纯文字slide div slide滑动(2014-02-16)

无图片滑动 纯文字slide div slide滑动

无图片滑动 纯文字slide div slide滑动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <style>  
  2. .cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  
  3. .cycle-slideshow { width: 35%; min-width: 200px; margin: auto; padding: 0; }  
  4.   
  5. /* anchors */  
  6. .cycle-slideshow > a {   
  7.     position: absolute; top: 0; left: 0;  
  8.     width: 100%; padding: 0; background-color: #222; display: block;  
  9. }  
  10.   
  11. /* images */  
  12. .cycle-slideshow > a > img {   
  13.     width: 100%;  
  14.     position: static;  
  15.     display: block;  
  16. }  
  17.   
  18. /* divs */  
  19. .cycle-slideshow > div {   
  20.     position: absolute; top: 0; left: 0;  
  21.     width: 100%; padding: 0;  
  22. }  
  23.   
  24. .composite-example > div { background: white }  
  25. .composite-example > div > img { display: block; }  
  26. .composite-example > div .cycle-overlay {   
  27.     color: white; background: black; opacity: .6; filter:alpha(opacity=60);  
  28.     position: absolute; bottom: 0; width: 100%; padding: 15px;  
  29. }  
  30.   
  31. .cycle-slide p { margin: 0; padding: 10px }  
  32. </style>  
  33.   
  34. <p>  
  35. Cycle2 allows you to use any type of element for the slides, it's not solely for cycling images.  
  36. However, images are the default slide type so to use other elements you need to   
  37. override the <code>slides</code> option as show on this page.  The <code>slides</code> option  
  38. can be set to any valid jQuery selector.  The default value is <code>> img</code>   
  39. which is a selector to find all image elements that are immediate children of the slideshow  
  40. container.  
  41.   
  42.   
  43. </p><h2 id="divs">Divs</h2>  
  44. <p>  
  45. These two examples demonstrates using plain old divs as slide elements.  
  46. </p>  
  47. <div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000" data-cycle-slides="> div" style="position: relative; overflow: hidden;"><div style="background-color: rgb(255, 204, 204); position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; visibility: hidden; display: block;" class="cycle-slide cycle-sentinel">  
  48.         <p style="visibility: hidden;">  
  49.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  50.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  51.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
  52.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
  53.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
  54.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  55.     </p></div>  
  56.       
  57.       
  58.       
  59. <div style="background-color: rgb(255, 204, 204); position: absolute; top: 0px; left: 0px; z-index: 97; opacity: 1; display: none; background-position: initial initial; background-repeat: initial initial;" class="cycle-slide">  
  60.         <p>  
  61.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  62.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  63.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
  64.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
  65.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
  66.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  67.     </p></div><div style="background-color: rgb(204, 255, 204); position: absolute; top: 0px; left: 0px; z-index: 96; display: none; opacity: 1; background-position: initial initial; background-repeat: initial initial;" class="cycle-slide">  
  68.         <p>  
  69.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  70.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  71.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
  72.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
  73.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
  74.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  75.     </p></div><div style="background-color: rgb(204, 204, 255); position: absolute; top: 0px; left: 0px; z-index: 99; display: block; opacity: 1; background-position: initial initial; background-repeat: initial initial;" class="cycle-slide cycle-slide-active">  
  76.         <p>  
  77.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  78.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  79.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
  80.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
  81.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
  82.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  83.     </p></div></div>  
  84.   
  85. <div class="cycle-slideshow" data-cycle-fx="fade" data-cycle-timeout="2000" data-cycle-slides="> div" style="position: relative;"><div class="cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; visibility: hidden; display: block;">  
  86.         <p style="visibility: hidden;">  
  87.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  88.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  89.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
  90.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
  91.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
  92.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  93.     </p></div>  
  94.       
  95.       
  96.       
  97. <div class="cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; opacity: 0; display: none;">  
  98.         <p>  
  99.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  100.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  101.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
  102.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
  103.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
  104.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  105.     </p></div><div class="cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 100; display: none; opacity: 0;">  
  106.         <p>  
  107.         Mel eu pertinax atomorum explicari, at sit ponderum interesset, viderer invidunt ne vis. Mea elitr quodsi necessitatibus ut, te eum audiam oporteat gubergren. Nostro tibique eu his, mel tamquam fabulas te. Nec saperet vocibus eu, ad his veniam graeco voluptua. Dicta homero propriae sit eu, oratio disputationi at mea.      
  108.         </p></div><div class="cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; opacity: 1;">  
  109.         <p>  
  110.         Utinam electram pertinacia cum et, mel an everti epicuri deseruisse. Vocibus docendi convenire mei at, et suas simul ius, id dicta constituam disputando pro. Te altera voluptatum sit, prima fabulas epicuri in sit, soleat inimicus qui id. Diam quodsi epicuri his eu, mea sumo agam mutat id. At has nisl nemore conceptam.  
  111.     </p></div></div>  

 


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