你的位置:首页 > Java教程

[Java教程]带网上开户表单jQuery焦点图


带网上开户表单jQuery焦点图是一款适合证券公司的带表单的图片左右滚动切换特效代码。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

<div class="index-banner">  <div class="head-login">    <div class="login-right">      <div class="fan0508-hdnav">          <ul>            <li class="on">贵金属投资</li>            <li class="last-li">石油投资</li>          </ul>        </div>        <div class="fan0508-bdnav">          <div class="regist-ul" id="reg">          <form action="#" method="post" name="" target="_self">            <ul>              <li style="display: none;">                <input class="username" type="" placeholder="姓名">              </li>              <li>                <input class="telinput" type="" placeholder="">              </li>              <li>                <input class="codenput" type="" placeholder=""><code class="get-yz">获取验证码</code> </li>            </ul>            <p class="clear"></p>            <input type="submit" class="openAccount-down" value="马上开户">           </form>          </div>          <div class="regist-ul" id="SYreg" style="display:none">            <form action="#" method="post" name="" target="_self">            <ul>              <li style="display: none;">                <input class="username" type="" placeholder="姓名">              </li>              <li>                <input class="telinput" type="" placeholder="">              </li>              <li>                <input class="codenput" type="" placeholder=""><code class="get-yz">获取验证码</code> </li>            </ul>            <p class="clear"></p>            <input type="submit" class="openAccount-down" value="马上开户">            </form>          </div>        </div>    </div>  </div>  <div class="hd">   <ul class="num">    <li></li>    <li></li>    <li></li>    <li></li>   </ul> </div> <div class="bd">  <ul class="pic" >   <li> <a href="#"><img src="images/banner01.jpg" width="1200" height="280" /></a> </li>   <li> <a href="#"><img src="images/banner02.jpg" width="1200" height="280" /></a></li>   <li> <a href="#"><img src="images/banner03.jpg" width="1200" height="280" /></a></li>   <li> <a href="#"><img src="images/banner02.jpg" width="1200" height="280"/></a> </li>  </ul> </div> <div class="pnBtn prev"> <span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a> </div> <div class="pnBtn next"> <span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a> </div></div>

via:http://www.w2bc.com/Article/44987