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

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

1、使用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 } 

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

效果圖什麼的也懶得貼了；

2、使用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=$('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實現圖片輪播的效果也就完成了！