!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
幻灯效果 var scrollDuration = 1000;//切换速度 var timeDuration = 2000;//等待时间 var scrollEasing = 'quadratic'; $(function() { $('#content').carouFredSel({ direction: 'down',//滑动方向 width: 480, height: 264, items: { visible: 1, width: 480, height: 264 }, scroll: { fx: 'directscroll', duration: scrollDuration, timeoutDuration: timeDuration, easing: scrollEasing, onBefore: function( data ) { data.items.old.animate({ 'margin-left': -140 }, scrollDuration, scrollEasing); data.items.visible.css({ 'margin-left': 264 }).animate({ 'margin-left': 10 }, scrollDuration, scrollEasing); } }//scroll end }) }) #box{ width:480px; height:264px; margin:-132px 0 0 -240px; position:absolute; top:50%; left:50%; overflow:hidden; } #content { position:absolute; width:480px; height:260px; bottom:0; left:0; } #content img { display:block; margin-right:10px; float:left; }
你可以给图片添加一个mouseenter()和mouseleave()
事件,enter进图片时用stop()
停止一切动画(或者关闭定时器),leave图片时开启定时器,这样就可以实现鼠标悬停了。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。