程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> js-用jquery寫了個圖片切換效果,想讓鼠標懸停圖片時候圖片停止切換,沒有懸停則自動切換

js-用jquery寫了個圖片切換效果,想讓鼠標懸停圖片時候圖片停止切換,沒有懸停則自動切換

編輯:編程綜合問答
用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圖片時開啟定時器,這樣就可以實現鼠標懸停了。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved