html5頁面中純js和CSS3實現炫酷自動幻燈片特效的方法

小編給大家分享一下html5頁面中純js和CSS3實現炫酷自動幻燈片特效的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　Karrot Slider是一款純Javascript和CSS3制作的自動播放的幻燈片插件。該幻燈片沒有任何外部依賴，內置有8種不同的動畫過渡效果。該幻燈片支持響應式圖片設計模式，也可以制作為全屏幻燈片模式。

　　使用方法
　　使用該幻燈片插件需要引入slider.css和sliderEffects.js文件。

<link href="css/slider.css?7.1.33" rel="stylesheet" type="text/css" /> 
<script src="js/sliderEffects.js?7.1.33"></script>　

HTML結構　　創建一個帶ID號的<p>，然后設置它的寬度和高度，并將第一張圖片放置在這個<p>中。
<p id="slider" style="width: 900px; height: 505px; margin: auto;"> 
<img src="images/1.jpg" > 
</p>

8種內置過渡動畫效果的使用　　該幻燈片內置了8種不同的動畫過渡效果：
　　Dissolve
　　Slide Up
　　Slide Down
　　Slide Left
　　Slide Right
　　Mosaic
　　Window
　　Doors
　　所有的效果函數都包含2個參數，第一個是當前圖片的引用，第二個是下一張圖片的引用。
//effect(current, next); 
KSDissolve("images/1.jpg", "images/2.jpg");
KSSlideUp("images/1.jpg", "images/2.jpg");
KSSlideDown("images/1.jpg", "images/2.jpg");
KSSlideLeft("images/1.jpg", "images/2.jpg");
KSSlideRight("images/1.jpg", "images/2.jpg");
KSMosaic("images/1.jpg", "images/2.jpg");
KSWindows("images/1.jpg", "images/2.jpg");
KSDoors("images/1.jpg", "images/2.jpg");

　初始化插件　　要初始化該幻燈片插件，可以創建3個變量：一個圖片數組，圖片顯示的時間和當前圖片的下標。
var images = ["images/1.jpg" , "images/2.jpg" , "images/3.jpg", "images/4.jpg" ];
var timing = 3000;
var currentImg = 1;

　然后創建一個函數來選擇下一張圖片，并可以設置過渡到下一張圖片時的動畫效果。
function karrotSlider() { 
var nextimg = (currentImg + 1) > images.length ? 1 : currentImg + 1 ;
var effect = Math.floor (Math.random()*6 +1 ); 
switch (effect) { 
case 1: 
KSDissolve(images[currentImg- 1], images[nextimg- 1]) 
break; 
case 2: 
KSSlideUp(images[currentImg- 1], images[nextimg- 1]) 
break; 
case 3: 
KSSlideDown(images[currentImg- 1], images[nextimg- 1]) 
break; 
case 4: 
KSSlideLeft(images[currentImg- 1], images[nextimg- 1]) 
break; 
case 5: 
KSSlideRight(images[currentImg- 1], images[nextimg- 1]) 
break; 
case 6: 
KSMosaic(images[currentImg- 1], images[nextimg- 1]) 
break; 
case 7: 
KSWindows(images[currentImg- 1], images[nextimg- 1]) 
break; 
case 8: 
KSDoors(images[currentImg- 1], images[nextimg- 1]) 
break; 
} 
currentImg = (currentImg + 1) > images.length ? 1 : currentImg + 1;
}

最后使用setInterval()函數來調用這個函數。
setInterval(function () { karrotSlider() } , timing);

　　注意：所有的圖片必須尺寸相同。如果想制作全屏幻燈片，可以在body結束之前調用fullScreen();函數。

看完了這篇文章，相信你對“html5頁面中純js和CSS3實現炫酷自動幻燈片特效的方法”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！