我的第一篇文章、哈哈、有點小雞凍。
之前在百度搜索“圖片輪播”、“圖片滾動”，結果都是那種可以左右切換的。也是我們最常見的那種。可能是搜索 關鍵字的問題吧。
如圖：
教程效果圖：
教程開始：
HTML代碼：
1 <body> 2 <div id="div1"> 3 <div id="div4"> 4 <div id="div2"> 5 <img src="img/1.jpg" alt="圖片1"/> 6 <img src="img/2.jpg" alt="圖片2"/> 7 <img src="img/3.jpg" alt="圖片3"/> 8 <img src="img/4.jpg" alt="圖片4"/> 9 </div> 10 <div id="div3"></div><!--這個容器是用來防止圖片滾動時會出現空白的區域--> 11 </div> 12 </div> 13 </body>
CSS代碼：
1 <style type="text/css"> 2 div,img{ 3 margin:0; 4 padding:0; 5 } 6 img{ 7 float:left; 8 height:100px; 9 width:150px; 10 } 11 #div1{ 12 width:500px; 13 height:100px; 14 overflow: hidden; 15 border:solid blue 2px; 16 } 17 #div2,#div3{ 18 float:left; 19 } 23 #div4{ 24 width:500%;/*這個屬性很重要 讓容器有足夠的寬度實現滾動*/ 25 float:left; 26 } 27 </style>
JavaScript代碼：
1 <script type="text/javascript"> 2 window.onload=function(){ 3 var v1=document.getElementById('div1'); 4 var v2=document.getElementById('div2'); 5 var v3=document.getElementById('div3'); 6 7 v3.innerHTML= v2.innerHTML;//將v2容器里面的圖片插入到v3容器里面 使其空白區域被遮住。 8 function fun(){ 9 if(v1.scrollLeft<=0){ 10 v1.scrollLeft=600; 11 }else{ 12 v1.scrollLeft--; 13 } 14 } 15 16 var fun1=setInterval(fun,10); 17 18 v1.onmouseover = function() {//鼠標經過時 清除定時器 停止圖片的滾動 19 clearInterval(fun1) 20 }; 21 v1.onmouseout = function() {//鼠標離開后 繼續滾動圖片 22 fun1 = setInterval(fun, 10) 23 }; 24 } 25 26 </script>
教程結束。
本人新手一個、請大神們多多指教。
此處省略一萬字...