图片折叠效果 可用于banner焦点图 包括垂直折叠与水平折叠
XML/HTML Code
- <div class="sample">
- <ol class="rounded dark" id="accordion_1" style="width: auto; height: auto; list-style-type: upper-roman">
- <li>
- <div>Slide One</div>
- <div>
- <figure>
- <img src="img-demo/1.jpg" alt="image" />
- <figcaption>Assassini!</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <div>Slide Two</div>
- <div>
- <figure>
- <img src="img-demo/2.jpg" alt="image" />
- <figcaption>Couldn't find an image of a Khajit thief! Fail!</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <div>Slide Three</div>
- <div>
- <figure>
- <img src="img-demo/3.jpg" alt="image" />
- <figcaption>That's one angry looking red dude.</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <div>Slide Four</div>
- <div>
- <figure>
- <img src="img-demo/4.jpg" width="768" alt="image" />
- <figcaption>Was fun for a couple of hours or so...</figcaption>
- </figure>
- </div>
- </li>
- <li>
- <div>Slide Five</div>
- <div>
- <figure>
- <img src="img-demo/5.jpg" alt="image" />
- <figcaption>Not as good as Hot Pursuit.</figcaption>
- </figure>
- </div>
- </li>
- </ol>
- <ol class="stitch" id="accordion_2" style="width: 900px; height: 600px; list-style-type: upper-latin">
- <li>
- <div>First one</div>
- <div>
- <ol class="vertical stitch" id="accordion_4" style="list-style-type: lower-alpha">
- <li>
- <div>First one</div>
- <div>
- <h2>Slide 1</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
- <img src="img-demo/city1.jpg" alt="">
- </div>
- </li>
- <li>
- <div>Second</div>
- <div>
- <h2>Slide 2</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
- <img src="img-demo/city2.jpg" alt="">
- </div>
- </li>
- <li>
- <div>Last one in the row</div>
- <div>
- <h2>Slide 3</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
- <img src="img-demo/city3.jpg" alt="">
- </div>
- </li>
- </ol>
- </div>
- </li>
- <li>
- <div>Second</div>
- <div>
- <h2>Slide 2</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
- <img src="img-demo/city2.jpg" alt="">
- </div>
- </li>
- <li>
- <div>Last one in the row</div>
- <div>
- <h2>Slide 3</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
- <img src="img-demo/city3.jpg" alt="">
- </div>
- </li>
- </ol>
- <ol class="rounded light" id="accordion_3" style="width: 960px; height: 320px; list-style-type: decimal-leading-zero">
- <li>
- <div>First one</div>
- <div>
- <h2>Slide 1</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
- <img src="img-demo/city1.jpg" alt="">
- </div>
- </li>
- <li>
- <div>Second</div>
- <div>
- <h2>Slide 2</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
- <img src="img-demo/city2.jpg" alt="">
- </div>
- </li>
- <li>
- <div>Last one in the row</div>
- <div>
- <h2>Slide 3</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
- <img src="img-demo/city3.jpg" alt="">
- </div>
- </li>
- </ol>
- </div>
- <script>
- (function($, d) {
- $('#accordion_1').conventAccordion({
- autoPlay: true,
- startSlide: 1,
- slideInterval: 5000,
- pauseOnHover: true,
- actOnHover: true,
- continuous: false,
- autoScaleImages : true,
- slideSpeed: 3000,
- easing: 'easeOutBounce'
- });
- $('#accordion_2').conventAccordion({
- autoPlay: false,
- startSlide: 1,
- slideInterval: 4000,
- pauseOnHover: true,
- actOnHover: false,
- continuous: true,
- easing: 'easeInOutQuart'
- });
- $('#accordion_3').conventAccordion({
- autoPlay: false,
- slideInterval: 3000,
- pauseOnHover: true,
- actOnHover: true,
- continuous: true,
- easing: 'easeOutBounce'
- });
- $('#accordion_4').conventAccordion({
- autoPlay: false,
- slideInterval: 3000,
- pauseOnHover: true,
- actOnHover: false,
- continuous: true
- });
- })(jQuery, document);
- </script>
相关推荐
单页显示3个Item的ViewPager炫酷切换效果,适用于Banner等。
swiper3实现卡片效果banner
用RecyclerView实现完美的无限轮播图,3D效果和普通效果,支持自定义你的指示器哦,支持一屏三页效果哦,支持上下滑动的banner哦
jQuery表单输入框标签插件jQuery FormLabels jQuery插件字数统计 jQuery垂直滚动新闻效果插件jQuery jCarouse jQuery可伸缩的反馈表单插件Contactable ...基于jQuery实现的大号的banner图片切换效果
兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长...
里面集合了很多东西包括菜单 tab 选项卡 banner css js各种样式具体如:35个菜单样式、19个CSS菜单、鼠标放大镜查看图片效果、css_tab_ul菜单安装程序、让你震撼的图片展示javascript代码10款打包、19款网站常见多...
36.网页顶部可关闭banner效果.html 37.网页禁止复制代码.html 38.网页自动跳转代码.html 39.显示当前分辨率.html 40.页面右下角弹出提示消息.html 41.用CSS+JS控制Li背景颜色交替.html 42.用css实现简单的进度条....
使用collectionView实现的重叠卡片滚动效果
9.banner图效果-7种包含手机上支持手指滑动的; 10.时间轴-控制1种; 11.自定义滚动条-横向、纵向各一种; 12.临时禁用滚动条-禁用与启用方法各一个,也能禁用手机滚动条,同时解决px滚动条占用宽度问题。 13.图表等...
话语扩展折叠横幅 Discourse创建可扩展或折叠的横幅的主题组件 桌面检视 移动视图-肖像 流动检视-风景 有关更多信息, 访问: :
Awbanner 插入一会定时变换图形与连结的banner, 可设定五组连结, 一个frame仅能插入一个. Feed back from 插入一from, 经由它你可以在e-mail中收到表单的资料. Dynamic clock 插入一动态即时时钟. History Back ...
Banner交换系统插件.mxp Chromeless Windows.mxp Conversa Web CDK技术.mxp coolborder生成很Cool的表格边界.mxp disable_view_source.mxp Dreamweaver CS3 Spry 1.6插件更新包.mxp FCKeditor在线编辑器插件.mxp ...
2、新增PC端banner图片设定,现在可以使用管理后台详细设置功能指定banner图片文件名,不用再修改源代码了; (重要程度:中) 3、改进PC端后台详细设置界面,加宽html代码输入区、管理员密码输入区和系统公告区,...
用于发布到学校的官方成绩系统,例如Banner。 *给测验打分时,隐藏正确答案的问题。 帮助检查学生在测验中丢失的内容。 错误修复/增强功能:v1.5-D2L更改了一个元素ID,该ID在用户查看时破坏了成绩簿中的突出显示...