使用jq制作三合一网站焦点图效果
<style type="text/css">
.picFocus{margin:20px auto; width:467px;padding:5px; position:relative; overflow:hidden; zoom:1; }
.picFocus.hd{ width:100%; padding-top:5px; overflow:hidden; }
.picFocus.hd ul{ margin-right:-5px; overflow:hidden; zoom:1; }
.picFocus.hd ul li{ padding-top:5px; float:left; text-align:center; }
.picFocus.hd ul li img{ width:109px; height:65px; border:2px solid #ddd; cursor:pointer;margin-right:5px; }
.picFocus.hd ul li.on{ background:url("images/icoUp.gif") no-repeat center 0;}
.picFocus.hd ul li.on img{ border-color:#f60; }
.picFocus.bd li{ vertical-align:middle; }
.picFocus.bd img{ width:467px; height:230px; display:block; }
</style>
<div class="picFocus">
<divclass="bd">
<divclass="tempWrap" style="overflow:hidden; position:relative;width:467px"><ul style="width: 1868px; left: -1401px; position:relative; overflow: hidden; padding: 0px; margin: 0px;">
<infoalbumlistid="a" infoid="$InfoID" offset="0">
<li style="float: left; width:467px;"><a target="_blank" href="#"><imgsrc="{$a.AlbumPicture}"/></a></li> </li>
</infoalbumlist>
</ul></div>
</div>
<divclass="hd">
<ul>
<infoalbumlistid="a" infoid="$InfoID" >
<liclass=""><img src="{$a.AlbumPicture}"title="{$a.AlbumTitle}" alt="{$a.AlbumDescription}" /></li>
</infoalbumlist>
</ul>
</div>
</div>
<script>jQuery(".picFocus").slide({mainCell:".bd ul",effect:"left",autoPlay:true});</script>