web框架UI轮播图--焦点图 / 幻灯片

UI轮播图是Web框架中非常常用的功能,我们可以借助JQuerySuperSlide来实现许多常用的轮播方式,代码分CSS、JS和HTML实现段。

CSS段

/* css 重置 */ /* css 重置 */ * { margin: 0; padding: 0; list-style: none; } body { background: #fff; font: normal 12px/22px 宋体; } img { border: 0; } a { text-decoration: none; color: #333; } /* 本例子css */ .slideBox { text-align: center; width: 265px; height: 230px; overflow: hidden; position: relative; } .slideBox .hd { height: 15px; overflow: hidden; position: absolute; right: 5px; bottom: 5px; z-index: 1; } .slideBox .hd ul { overflow: hidden; zoom: 1; float: left; } .slideBox .hd ul li { float: left; margin-right: 2px; width: 15px; height: 15px; line-height: 14px; text-align: center; background: #fff; cursor: pointer; } .slideBox .hd ul li.on { background: #f00; color: #fff; } .slideBox .bd { position: relative; height: 100%; z-index: 0; } .slideBox .bd li { zoom: 1; vertical-align: middle; } .slideBox .bd img { width: 450px; height: 230px; display: block; }

JS段

引用jquery.min.js和jquery.SuperSlide.2.1.1.js ,引用代码请务必加在head标签里面。

HTML段

<div id="slideBox" class="slideBox">
<div class="hd">
<ul><li>1</li><li>2</li><li>3</li></ul>
</div>
<div class="bd">
<ul>
<li><a href="http://www.hocode.com" target="_blank"><img style="width:200px;height:200px" src="../../images/201805/pencil.ico" /></a></li>
<li><a href="http://www.hocode.com" target="_blank"><img style="width:200px;height:200px" src="../../images/201805/pencil1.ico" /></a></li>
<li><a href="http://www.hocode.com" target="_blank"><img style="width:200px;height:200px" src="../../images/201805/pencil2.ico" /></a></li>
</ul>
</div>

</div>

<script id="jsID" type="text/javascript">
jQuery(".slideBox").slide({ mainCell: ".bd ul", autoPlay: true });
</script>

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » web框架UI轮播图--焦点图 / 幻灯片
本文标题:web框架UI轮播图--焦点图 / 幻灯片
本文地址:http://www.hocode.com/OrgTec/UI/0001.html

相关文章: 深圳开发平台 ¦

电话
电话 18718672256

扫一扫
二维码