特效描述:利用jQuery实现 水平拖动条 图片相册。利用jQuery实现带水平拖动条图片相册代码
代码结构
1. 引入CSS
<link href="css/main.css" rel="stylesheet" type="text/css" />
2. 引入JS
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="images/hScrollPane.js"></script>
3. HTML代码
<div id="zsgun"> <a href="#" class="prenext zspre"></a> <a href="#" class="prenext zsnext"></a> <div id="gundiv" class="container2"> <ul> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img01.jpg" alt="51前端网页特效" width="153" height="153"/></a> <p><a href="http://51qianduan.com" target="_blank">潮流单品</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img02.jpg" alt="" width="153" height="153"/></a><p><a href="http://51qianduan.com" target="_blank">网页特效</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img03.jpg" alt="" width="153" height="153"/></a><p><a href="http://51qianduan.com" target="_blank">时尚摄影</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img04.jpg" alt="51前端网页特效" width="153" height="153"/></a> <p><a href="http://51qianduan.com" target="_blank">英伦风</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img05.jpg" alt="" width="153" height="153"/></a><p><a href="http://51qianduan.com" target="_blank">素装运动派</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img01.jpg" alt="51前端网页特效" width="153" height="153"/></a> <p><a href="http://51qianduan.com" target="_blank">潮流单品</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img02.jpg" alt="" width="153" height="153"/></a><p><a href="http://51qianduan.com" target="_blank">网页特效</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img03.jpg" alt="" width="153" height="153"/></a><p><a href="http://51qianduan.com" target="_blank">时尚摄影</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img04.jpg" alt="51前端网页特效" width="153" height="153"/></a> <p><a href="http://51qianduan.com" target="_blank">英伦风</a></p></li> <li><a href="http://51qianduan.com" target="_blank"><img src="images/img05.jpg" alt="" width="153" height="153"/></a><p><a href="http://51qianduan.com" target="_blank">素装运动派</a></p></li> </ul> </div> </div> <script type="text/javascript"> $(function() { var glen = $("#gundiv ul li").length; $("#gundiv ul").css("width",172 * (glen)); $("#gundiv li").hover(function(){$("#gundiv li").removeClass("zslion");$(this).addClass("zslion");},function(){$(this).removeClass("zslion");}) }); $("#zsgun").hScrollPane({ mover:"ul", moverW:function(){return $("#zsgun li").length*172-17;}(), showArrow:true, handleCssAlter:"draghandlealter" }); </script> <!--效果html结束--> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>