利用jQuery實現一種Slider動畫

標籤：style   blog   java   color   os   width   

關於輪播動畫一種比較簡單的實現機制就是

　　圖片首先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寫一個類似的