分別用css3、JS實現圖片簡單的無縫輪播功效

標籤：func   idt   height   ati   htm   thml   分享   move   還需   

本文主要介紹分別使用CSS3、JS實現圖片簡單無縫輪播功效；

一、使用CSS3實現：利用animation屬性

（實現一張一張的輪播，肉眼只看見一張圖片）

HTML部分比較簡單，兩個div下包著幾個img標籤；為了實現無縫輪播，注意第一張圖片要與最後一張圖片相同；

<div class="out">            <div class="imgs">                <img src="img/beatuy.jpg"/>                <img src="img/child.jpg"/>                <img src="img/girl.jpg"/>                <img src="img/milk.jpg"/>                <img src="img/cup.jpg"/>                <img src="img/dog.jpg"/>                <img src="img/beatuy.jpg"/>            </div>        </div>

最外層div設定ovflow:hidden;position: relative;既然最外層div設定了position: relative;所以內層div需要設定position: absolute;使得其運動相對父元素而言；

CSS代碼如下：

 1 .out{ 2             width: 200px; 3             height: 100px; 4             overflow: hidden; 5             position: relative; 6         } 7         .imgs{ 8             width: 1400px; 9             height: 100px;10             position: absolute;11             animation: ppt 10s linear infinite;12         }13         14         img{15             float: left;16             width: 200px;17             height: 100px;18         }19         @keyframes ppt{20             0%{left:0px}21             20%{left:-250px}22             40%{left:-500px}23             60%{left:-750px}24             80%{left:-1000px}25             100%{left:-1200px}26         }

這樣圖片就可以輪播了，但是滑鼠放上去的時候圖片還是一直在輪播的，如果我們想讓滑鼠放在圖片上時，輪播停止，或者出現一些資訊，我們需要加上：hover;設定動畫的狀態，代碼很簡潔：如下

 1 .out:hover .imgs{ 2 animation-play-state:paused 3 } 

這樣我們的輪播效果就出來啦；

什麼的也懶得貼了；

二、使用JS實現：利用定時器setInterval

（多張圖片輪播，肉眼可以看到多張圖片）

同樣HTML部分比較簡單，需要設定外層DIV ovflow:hidden;之所以每個div既有class，也有id,是因為樣式我是通過class控制的，DOM是通過ID擷取的

 1 <div class="out" id="out"> 2             <div class="main" id=‘main‘> 3                 <div class="pic" id="pic"> 4                     <img src="img/0.jpg"/> 5                     <img src="img/6.jpg"/> 6                     <img src="img/hehua2.2.png"/> 7                     <img src="img/tupian1.png"/> 8                 </div> 9                 <div class="copyPic" id="copyPic">10                     11                 </div>12             </div>

可以看到class="copyPic" 的DIV為空白的，沒有內容，不急，在JS部分會為他賦上內容，其內容與class="pic"的一樣；當然我們也可以直接在HTML中為其新增內容；現在為其加上一點CSS樣式吧

 1 .out{ 2                 width: 820px; 3                 overflow: hidden; 4             } 5             .main{ 6                 width: 1650px; 7                 height: 100px; 8             } 9             img{10                 width: 200px;11                 height: 100px;12                 border: 0;13             }14             .pic,.copyPic{15                 float: left;  16             }

這樣，我們的基本樣式就完成了，下面就開始實現輪播效果吧：

首先，為了代碼方便，先封裝一個簡單函數

 1 function $(str){ 2 return document.getElementById(str) 3 } 

然後為class="copyPic" 的DIV加上內容：

 1 (′copyPic′).innerHTML=(′copyPic′).innerHTML=(‘pic‘).innerHTML; 

好啦，開始寫輪播函數：

1 function move(){2                 if ($(‘out‘).scrollLeft-$(‘copyPic‘).offsetWidth>=0) {3                     $(‘out‘).scrollLeft-=$(‘out‘).offsetWidth;4                 } else{5                     $(‘out‘).scrollLeft++;6                 }7             }
　　　　var t=setInterval(move,10);

這樣我們的圖片就可以輪播啦，同樣的如果希望滑鼠放上去後輪播停止，還需要加上幾句代碼，使用滑鼠事件，清除定時器

1 $(‘out‘).onmousemove=function(){2                 clearInterval(t);3             }4             $(‘out‘).onmouseout=function(){5                  t=setInterval(move,10);6             }

OK，這樣我們使用JS實現圖片輪播的效果也就完成了！

分別用css3、JS實現圖片簡單的無縫輪播功效