首页 > 代码库 > 利用jQuery实现一种Slider动画

利用jQuery实现一种Slider动画

2024-07-13 03:51:04   226人阅读

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

　　图片首先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写一个类似的


联系
我们