无图片滑动 纯文字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>
相关推荐
Web App下图片滑动组件 #演示地址(使用移动设备浏览): #用法 1.将图片宽、高、URL写入json文件 格式: "height": 950,` "width": 800, "img": "img/1.jpg" 2.引入slide.js文件 3.创建id为canvas的div块 4.定义...
参考代码: 代码如下: <div id=”slide_element” class=”slide”>这里是要滑动显示的内容。</div> 我们的CSS也不需要任何修饰。 参考代码: 代码如下: .slide { margin: 20px 0; padding: 10px; width: 200px; ...
本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <div class=text-container> ...
59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏...
59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...
59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...
假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1 body下面添加如下代码 <div class=swiper-container> <div class=swiper-wrapper> <div class=swiper-slide> 1 </div> <div class=swiper-slide> 2...
59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...
<div id="slide-wrapper"> <input type="hidden" value="" id="lockable"> <div id="slider"> <span id="label"></span> <span id="lableTip">Slide to unlock! </div> </div> 重置 <p class="warn"></p>
<div class="slide-selected"></div> <i class="btn-price btn-left"></i> <i class="btn-price btn-right"></i> <div class="tip"> <div class="tip-content"></div> ...
jquery.slider.js 这是一个jquery插件,可以轻松地用于滑动容器中的几张图片或自动切换图片。 它设计用于移动页面,但也可以在IE9 +,chrome,ff中使用使用方式:<div class =“> </ div> [removed] var Slider = $...
59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...
引入jquery.js,复制以下代码,即可运行。 <style type=text/css> .slide { position: relative; height: 200; lightyellow; ....slide .inner { ...<div id=slidebottom class=slide> <but
<div class="carousel-item active" data-sm-img="images/slide_01_900x410.jpg" data-lg-img="images/slide_01_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_02_900x410.jpg" ...
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创)。 直接上代码,把html、css和jquery代码copy到页面上...
说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition。 (1)先写出整体的框架 <div class=slide-show> ...
原始的轮播组件,并不支持滑动滚屏: 代码如下: <span xss=removed> </span><div class=row> <div id=carousel-generic class=carousel data-ride=carousel> <li data-target=#carousel-generic data-slide-to...
分享一款基于jQuery超级酷动画滑动插件。这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效。... <div class=pogoSlider-slide data-transition=slideOverLeft data-duration=1000 xss=removed></di
话不多说,直接附上源码,仅供大家参考 <div class=menu> <li><a>JavaScript</a></li> <li value=1><a>Graphic Design</a></li> ... <li><a>User Interface</a></... <div id=slide></div> </div> * {margin:0; pad
<div id="img_slide" class="md img_slide"> <div class="cons"><div class="con2"> [ecmsinfo]'2',7,16,0,12,33,1[/ecmsinfo]万能标签置入(对应标签一) </div></div> <div class="ctl_bar"> ...