关于轮播动画一种比较简单的实现机制就是
图片首先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写一个类似的