B/S开发框架_软件开发平台_web开发框架_敏捷框架_.net开发平台_快速开发平台

/* 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; }

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

<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="https://www.hocode.com" target="_blank"><img style="width:200px;height:200px" src="../../images/201805/pencil.ico" /></a></li>
<li><a href="https://www.hocode.com" target="_blank"><img style="width:200px;height:200px" src="../../images/201805/pencil1.ico" /></a></li>
<li><a href="https://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>