溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“jquery怎么實現從右往左不停滾動圖片的特效”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
DIV CSS+JQ不一連轉動圖片特效截圖
始終不陸續圖片遷移轉變殊效的特點：
CSS5收拾整頓收集不間斷從右往左轉折jquery+DIV+CSS特效，鼠標經過不竭動彈圖片刻（懸停時）圖片中止轉動，鼠標移開圖文形式持續不一連轉動運用DIV CSS+JQ實現圖片轉折特效。
1、HTML代碼以下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>不連續圖片滾動在線演示 CSS5</title><link href="images/style.css" rel="stylesheet" type="text/css" /><!-- css5.com.cn --><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script src="jQuery-jcMarquee.js" type="text/javascript"></script><script>$(function(){ $('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 }); // CSS5暗示：10px代表間距，第二個20代表動彈速度 }); </script></head><body><div id="mrq"><!-- HTML注解 CSS5揭示：殊效DIV最先 --> <div id="Marquee_x"> <ul> <li> <div> <a href="//www.css5.com.cn/" target="_blank"><img src="images/i1.jpg" /> <span>CSS5學習</span></a> </div> <div> <a href="//www.css5.com.cn/" target="_blank"><img src="images/i2.jpg" /> <span>CSS深造上CSS5</span></a> </div> <div><a href="#" target="_blank"><img src="images/i3.jpg" /> <span>案例演示</span></a></div> <div><a href="//www.css5.com.cn/jiqiao/" target="_blank"><img src="images/i4.jpg" /> <span>CSS才力</span></a></div> <div><a href="//www.css5.com.cn/texiao/" target="_blank"><img src="images/i5.jpg" /> <span>CSS特效</span></a></div> <div><a href="//www.css5.com.cn/jianrong/" target="_blank"><img src="images/i6.jpg" /> <span>CSS hack</span></a></div> <div><a href="//www.css5.com.cn/shili/" target="_blank"><img src="images/i7.jpg" /> <span>DIV+CSS實例</span></a></div> <div><a href="#" target="_blank"><img src="images/i8.jpg" /> <span>轉動案例演示</span></a></div> <div><a href="#" target="_blank"><img src="images/i9.jpg" /> <span>演示形式</span></a></div> </li> </ul> </div><!-- CSS5暗指：殊效DIV竣事 --></div> </body></html>以上HTML源代碼，在只有一個LI標簽內每一個DIV包裹一組圖文數據，切記只重要應用一個ul li列表，一切動彈圖片數據放到這組li列表標簽內。此不一連轉折特效可管制每組圖文數據之間間距，可以或許管束圖片遷移轉變速度。
2、CSS代碼：
@charset "utf-8"; /* CSS5-CSS初始化模板-css5.com.cn */ body, div, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} /* CSS批注注明：\5B8B\4F53 代表 宋體，更多中文字體轉 Unicode //www.css5.com.cn/jiqiao/325.shtml */ ol, ul ,li{list-style:none} img {border: 0; vertical-align:middle} body{color:#000000;background:#FFF; text-align:center} .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} a{color:#000000;text-decoration:none} a:hover{color:#BA2636;text-decoration:underline} #mrq{width:925px; margin:20px auto;border:1px solid #000; padding:2px} #Marquee_x { overflow:hidden; width: 925px } #Marquee_x ul li ,#Marquee_x ul li div{ float:left;line-height:25px;overflow:hidden} /* 橫向動彈必需讓全體li左浮動 */ #Marquee_x ul li div{ float:left;line-height:25px;height:131px; width:142px; overflow:hidden} #Marquee_x ul li div img{ border:1px solid #DADADA; width:140px; height:105px; display:block} #Marquee_x ul li div span{ display:block;}按照需求修改CSS抵達自己所須要的機關目的，比如批改邊框、margin、圖片高度、圖片寬度等
“jquery怎么實現從右往左不停滾動圖片的特效”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
