- 用jquery寫了個圖片切換效果,想讓鼠標懸停圖片時候圖片停止切換,沒有懸停則自動切換
-
<!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圖片時開啟定時器,這樣就可以實現鼠標懸停了。