幻灯片

今天仿的幻灯片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
    margin:0;
    padding:0;
}
img{
    border:0;
    border:none;
}
ul li{
    list-style:none;
}
.ad{
    width:586px;
    height:150px;
    overflow:hidden;
    margin:50px;
    position:relative;
}
.slider img{ 
    width:586px; 
    height:150px;
    vertical-align: bottom;
}
.slider,.num{
    position:absolute;
}
.num{
    bottom:5px;
    right:5px;
}
.num li{
    width:16px;
    height:16px;
    font-size:12px;
    color:#FF7300;
    text-align:center;
    background:#fff;
    border:1px solid #FF7300;
    margin:3px 2px;
    cursor:pointer;
    float:left;
}
.num li.on{
    width:18px;
    height:18px;
    background:#FF7300;
    color:#fff;
    margin:0 1px;
    font-size:14px;
    font-weight:700;
}
</style>
<title>ad</title>
<script type="text/javascript" src="../sea/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var iIndex=0;
    var adId;
    var len=$(".num > li").length;
    
    $(".num li").mouseover(function(){
        var iIndex=$(".num li").index(this);
        showImg(iIndex);
    }).eq(0).mouseover();
    
    
    function showImg(iIndex){
        var iAdHeight=$(".ad").height();
        $(".slider").stop(true,false).animate({top:-iAdHeight*iIndex},1000);
        $(".num li").removeClass("on")
        .eq(iIndex).addClass("on");
    }

    /*鼠标若在ad的范围内，则停止自动动画，若移出，则开始动画*/
    $(".ad").hover(function(){
        clearInterval(adId);
    },function(){
        adId=setInterval(function(){
            showImg(iIndex);
            iIndex++;
            if(iIndex==len){iIndex=0;}    
        },3000);
    }).trigger("mouseleave")
})
</script>
</head>

<body>

<div class="ad" >
   <ul class="slider" >
           <li><img src="images/ads/1.gif"/></li>
        <li><img src="images/ads/2.gif"/></li>
        <li><img src="images/ads/3.gif"/></li>
        <li><img src="images/ads/4.gif"/></li>
        <li><img src="images/ads/5.gif"/></li>
    </ul>
    <ul class="num" >
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
   </ul>
</div>
</body>
</html>



posted @ 2012-03-04 17:54  猪弟  阅读(193)  评论(0)    收藏  举报