使用jq制作三合一网站焦点图效果

使用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>