Js:Mfocus

index.html

<div id="slider" class="fl">
                  <ul>
                    <li><a href="#"><img src="style/p1.jpg" alt=""></a><p>惠侨科圣诞晚会获好评</p> </li>
                    <li><a href="#"><img src="style/p1.jpg" alt=""></a><p>惠侨科圣诞晚会获好评</p></li>
                    <li><a href="#"><img src="style/p1.jpg" alt=""></a><p>惠侨科圣诞晚会获好评</p></li>
                 </ul>
                <div class="button">
                          <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
                   </div>
                </div>
//js: if($("#slider").length>0){$("#slider").Mfocus({effect:'fade',speed:'800'});}
//style:
#slider{width:200px;height:220px;overflow:hidden;position:relative;border: 1px solid #ccc;}
#slider ul{position:absolute;}
#slider ul li{position: relative;}
#slider ul li p{position: absolute;bottom:3px;left:0px;color: #fff;line-height: 25px;display: block;background-color: #444;width: 100%;font-size: 12px;padding-left: 10px;}
  .button{position:absolute;bottom:4px;right:5px;cursor: default;}
  .button span{display:inline-block;color:#fff;background-color:#fff;margin-left:3px;padding-left:2px;padding-right:2px;line-height:10px;}
#slider .on{background-color:#ffd200;color:#000;}