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

最新推荐文章于 2021-06-03 05:45:56 发布

最新推荐文章于 2021-06-03 05:45:56 发布 · 317 阅读

文章标签：

#javascript #ViewUI

本文介绍了如何使用jQuery创建无图片的纯文字滑动效果，包括CSS样式设置、HTML结构搭建及jQuery插件的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

演示

   XML/HTML Code
  

   <style>  
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  
.cycle-slideshow { width: 35%; min-width: 200px; margin: auto; padding: 0; }  
  
/* anchors */  
.cycle-slideshow > a {   
    position: absolute; top: 0; left: 0;  
    width: 100%; padding: 0; background-color: #222; display: block;  
}  
  
/* images */  
.cycle-slideshow > a > img {   
    width: 100%;  
    position: static;  
    display: block;  
}  
  
/* divs */  
.cycle-slideshow > div {   
    position: absolute; top: 0; left: 0;  
    width: 100%; padding: 0;  
}  
  
.composite-example > div { background: white }  
.composite-example > div > img { display: block; }  
.composite-example > div .cycle-overlay {   
    color: white; background: black; opacity: .6; filter:alpha(opacity=60);  
    position: absolute; bottom: 0; width: 100%; padding: 15px;  
}  
  
.cycle-slide p { margin: 0; padding: 10px }  
</style>  
  
<p>  
Cycle2 allows you to use any type of element for the slides, it's not solely for cycling images.  
However, images are the default slide type so to use other elements you need to   
override the <code>slides</code> option as show on this page.  The <code>slides</code> option  
can be set to any valid jQuery selector.  The default value is <code>> img</code>   
which is a selector to find all image elements that are immediate children of the slideshow  
container.  
  
  
</p><h2 id="divs">Divs</h2>  
<p>  
These two examples demonstrates using plain old divs as slide elements.  
</p>  
<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">  
        <p style="visibility: hidden;">  
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
    </p></div>  
      
      
      
<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">  
        <p>  
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
    </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">  
        <p>  
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
    </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">  
        <p>  
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
    </p></div></div>  
  
<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;">  
        <p style="visibility: hidden;">  
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
    </p></div>  
      
      
      
<div class="cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; opacity: 0; display: none;">  
        <p>  
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
    </p></div><div class="cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 100; display: none; opacity: 0;">  
        <p>  
        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.      
        </p></div><div class="cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; opacity: 1;">  
        <p>  
        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.  
    </p></div></div>  

  

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

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

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

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

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