利用jQuery实现一种Slider动画

关于轮播动画一种比较简单的实现机制就是

　　图片首先float:left排列 祖父容器定宽 父容器无限宽 然后父容器left的值一直变化就可以实现动画效果了

举例如下

<div class="changeBox_imgs">
            <ul class="changeBox_imgs_list">
                <li><a href="#" target="_blank"><img alt="白强" src="images/banner1.jpg" />
                </a>
                </li>
                <li><a href="#" target="_blank"><img alt="白强" src="images/banner2.jpg" />
                </a>
                </li>
                <li><a href="#" target="_blank"><img alt="白强" src="images/banner3.jpg" />
                </a>
                </li>
            </ul>
        </div>

可以使changBox_imgs的定宽

.changeBox_imgs {
    position: relative;
    height: 354px;
    width: 732px;
    overflow: hidden;
}

宽即为图片宽度

然后使父元素无限宽

 

.changeBox_imgs_list {
    position: absolute;
    width: 9999px;
}

 

要滚动的元素

.changeBox_imgs_list li {
    float: left;
    width: 732px;
}

 

然后对于动画 只需要让父元素的left值变大就好了

如何调用

$(function() {
        //需要动画的延时时间 动画播放时间 图片数量 动画效果 
        $(".changeBox_imgs_list").BannerImages({
            speed:2000,
            length:3,
            easing:'easeInOutQuint',
            duration:500
        });//Banner滑动效果
    });

 

具体的函数代码如下 特别好懂

　　

(function($){
    /*动画的参数有linear，swing，jswing，easeInQuad，easeOutQuad，
    easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，
    easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，
    easeOutQuint，easeInOutQuint，easeInSine，easeOutSine，
     easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，
     easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，
     easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，
     easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce*/
    $.fn.BannerImages=function(options) {
    var settings = {length:3,speed:3000,easing:'jswing',duration:500}; 
    $.extend(settings, options);
    //self代表调用这个函数的元素 f表示第一个子元素
    var self = this, f = 1;
    //得到它的宽度转成int
    var width=parseInt($(this.children()[0]).css('width'));
    var main = function() {
        //width*f-width 其实就是
        var j = (width * f - width);
        //是第一个吗是的话返回0否则返回负值
        j=(j == 0 ? 0 : -j);
        //执行动画 改变距左边的距离 就可以实现动画效果
        self.animate({
            left : j + "px"
        }, {queue:false,
duration:settings.duration, easing: settings.easing});
    };
    //开始
    function start()  {
        //不停调用main 在一段时间后
        setTimeout(function() {
            f++;
            if (f > settings.length) {
                f = 1;
            }
            start();
            main();
        }, settings.speed)
    };
    //刚开始调用的其实是start函数
    start();
}
})(jQuery);

 

---

 

特别提示 需要

 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

以后用KISSY写一个类似的