jquery弹性广告图片切换

【Javascript】

下载

新闻

文章

jquery弹性广告图片切换

先看看效果吧：点击这里，以下是原码：

<!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" />
    <title>广告图片切换</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        body{
            text-align: center;
            font-size: 12px
        }
        #out_div{
            background: #39291c url("img/foot.jpg") no-repeat center bottom;
            height:545px;
            width: 1000px;
            margin:0 auto;
            position: relative;
        }
        #banner_ul{
            height:480px;
            width: 960px;
            border: 20px solid #564334;
            border-radius: 25px;
            overflow: hidden;
        }
        #pic_ul,#pic_ul li{ padding:0;margin: 0;list-style: none;}
        #pic_ul li{
            height: 480px;width:960px;overflow: hidden;float: left;
        }
        #pic_ul li img{border-radius: 5px}
        .per, .next {
            background-image: url("img/l_an.png");
            background-position: center 0;
            background-repeat: no-repeat;
            display: inline-block;
            left: 64px;
            position: absolute;
            top: 230px;
            width: 44px;
            height: 44px;
            font-size: 0;
        }
        .next{
            left:900px;
            background-image: url("img/r_an.png");
        }
        #out_div a:hover{
            background-position: center -44px;
            outline: none;
        }
    </style>
</head>
<body>
<div id="out_div">
    <a href="javascript:void(0)" class="per">&nbsp;</a>
    <a href="javascript:void(0)" class="next">&nbsp;</a>
    <div id="banner_ul">
        <ul id="pic_ul">
            <li><img src="img/pic.jpg" width="960" height="480" alt="广告图片" /></li>
            <li><img src="img/pic2.jpg" width="960" height="480" alt="广告图片" /></li>
            <li><img src="img/pic3.jpg" width="960" height="480" alt="广告图片" /></li>
        </ul>
    </div>
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        move_pic("#banner_ul","#pic_ul","left",3);
    });
    function move_pic(mid,ul,dir,s){
        //dir 方向：left,top两种选择
        //s 自动播放秒数默认3秒
        var id=$(mid);
        var obj={
            u: $(ul),//图片对应的ul对象
            l: $(ul+" li").size(),//统计图片张数
            i: 0,//目前播放第几张
            w: $(ul+" li").width(),//图片的宽
            h: $(ul+" li").height(),//图片的高
            t: s||3,//自动播放秒数
            s: null //定时器
        };
        obj.u.append(obj.u.html());//复制一份图片排在后面
        if(dir=="left")obj.u.width(obj.l*obj.w*2);//使全部图片横排成一排
        obj.s=setInterval(setTime,obj.t*1000);
        $(".per,.next").hover(function(){
            clearInterval(obj.s);
        },function(){
            obj.s=setInterval(setTime,obj.t*1000);
        });
        $(".per").click(function(){obj.i--;fun_pic()});
        $(".next").click(function(){obj.i++;fun_pic()});
        function setTime(){obj.i++;fun_pic()}
        function scroll(m){if(dir=="left")id.scrollLeft(m);else id.scrollLeft(m)}
        function fun_pic(){
            if(obj.i<0){scroll(obj.l*obj.w);obj.i=obj.l-1}
            if(obj.i>obj.l){scroll(0);obj.i=1}
            if(dir=="left"){
                id.stop().animate({scrollLeft:obj.i*obj.w},"slow","easeOutBounce");
            }else{
                id.stop().animate({scrollTop:obj.i*obj.h},"slow","easeOutBounce");
            }
        }
    }
    //扩展动画效果
    jQuery.extend( jQuery.easing,{
    easeInCubic: function (x, t, b, c, d) {return c*(t/=d)*t*t + b}, //加速
    easeOutCubic: function (x, t, b, c, d) {return c*((t=t/d-1)*t*t + 1) + b},//减速
    easeInQuart: function (x, t, b, c, d) {return c*(t/=d)*t*t*t + b},//重加速
    easeOutQuart: function (x, t, b, c, d) {return -c * ((t=t/d-1)*t*t*t - 1) + b},//重减速
    easeInSine: function (x, t, b, c, d) {return -c * Math.cos(t/d * (Math.PI/2)) + c + b},//温柔
    easeInExpo: function (x, t, b, c, d) {return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b},//终极加速
    easeInElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b},//开始时抖动
    easeOutElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b},//结束时抖动
    easeInBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*(t/=d)*t*((s+1)*t - s) + b},//先退后进
    easeInOutBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b},//先退后进
    easeInBounce: function (x, t, b, c, d) {return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b},//抖抖抖
    easeOutBounce: function (x, t, b, c, d) {if ((t/=d) < (1/2.75)) {	return c*(7.5625*t*t) + b;} else if (t < (2/2.75)) {	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;} else if (t < (2.5/2.75)) {	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;} else {	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;}}//弹力
    });
</script>
</body>
</html>