使用JS實現圖片輪播滾動跑馬燈效果

時間 2019-11-09

標籤使用實現圖片滾動馬燈效果欄目 JavaScript 简体版

原文原文鏈接

　　個人第一篇文章、哈哈、有點小雞凍。javascript

以前在百度搜索「圖片輪播」、「圖片滾動」，結果都是那種能夠左右切換的。也是咱們最多見的那種。多是搜索關鍵字的問題吧。css

如圖：java

教程效果圖：spa

教程開始：code

HTML代碼：blog

 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代碼：seo

 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>