久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

純js和CSS3炫酷自動幻燈片特效

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

1.jpg
　　使用方法
　　使用該幻燈片插件需要引入slider.css和sliderEffects.js文件。
  1. <link href="css/slider.css" rel="stylesheet" type="text/css" />
  2. <script src="js/sliderEffects.js"></script>      
復制代碼

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

　　8種內置過渡動畫效果的使用

　　該幻燈片內置了8種不同的動畫過渡效果：

  • 　　Dissolve
  • 　　Slide Up
  • 　　Slide Down
  • 　　Slide Left
  • 　　Slide Right
  • 　　Mosaic
  • 　　Window
  • 　　Doors

　　所有的效果函數都包含2個參數，第一個是當前圖片的引用，第二個是下一張圖片的引用。
  1. //effect(current, next);
  2. KSDissolve("images/1.jpg", "images/2.jpg");
  3. KSSlideUp("images/1.jpg", "images/2.jpg");
  4. KSSlideDown("images/1.jpg", "images/2.jpg");
  5. KSSlideLeft("images/1.jpg", "images/2.jpg");
  6. KSSlideRight("images/1.jpg", "images/2.jpg");
  7. KSMosaic("images/1.jpg", "images/2.jpg");
  8. KSWindows("images/1.jpg", "images/2.jpg");
  9. KSDoors("images/1.jpg", "images/2.jpg");            
復制代碼

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

　　然后創建一個函數來選擇下一張圖片，并可以設置過渡到下一張圖片時的動畫效果。
  1. function karrotSlider() {

  3. var nextimg = (currentImg + 1) > images.length ? 1 : currentImg + 1 ;
  4. var effect = Math.floor (Math.random()*6 +1 );

  6. switch (effect) {
  7.   case 1:
  8.    KSDissolve(images[currentImg- 1], images[nextimg- 1])
  9.    break;
  10.   case 2:
  11.    KSSlideUp(images[currentImg- 1], images[nextimg- 1])
  12.    break;
  13.   case 3:
  14.    KSSlideDown(images[currentImg- 1], images[nextimg- 1])
  15.    break;
  16.   case 4:
  17.    KSSlideLeft(images[currentImg- 1], images[nextimg- 1])
  18.    break;
  19.   case 5:
  20.    KSSlideRight(images[currentImg- 1], images[nextimg- 1])
  21.    break;
  22.   case 6:
  23.    KSMosaic(images[currentImg- 1], images[nextimg- 1])
  24.    break;
  25.   case 7:
  26.    KSWindows(images[currentImg- 1], images[nextimg- 1])
  27.    break;
  28.   case 8:
  29.    KSDoors(images[currentImg- 1], images[nextimg- 1])
  30.    break;
  31. }

  33. currentImg = (currentImg + 1) > images.length ? 1 : currentImg + 1;

  35. }               
復制代碼

　　最后使用setInterval()函數來調用這個函數。
  1. setInterval(function () { karrotSlider() } , timing);     
復制代碼
　　注意：所有的圖片必須尺寸相同。如果想制作全屏幻燈片，可以在body結束之前調用fullScreen();函數。

　　如果你喜歡這個插件，那么你可能也喜歡:

　　純CSS3超酷全屏響應式幻燈片特效

　　純CSS3炫酷全屏百葉窗效果幻燈片特效

　　 本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/jQuery/Sl ... r/201508142409.html

【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有：框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： 国产精品免费一区二区 | 久久久久久久久久久国产 | 成人免费观看男女羞羞视频 | 久久婷婷麻豆国产91天堂 | 国产精品久久久久一区二区三区 | 色婷婷国产精品综合在线观看 | 免费看爱爱视频 | av在线免费观看网址 | 亚洲v日韩v综合v精品v | 欧美日韩在线一区二区 | 国产精品成人一区二区 | 热99视频 | 色眯眯视频在线观看 | 国产精品久久免费观看 | 九色在线| 高清色 | 日日噜噜噜夜夜爽爽狠狠视频97 | 在线观看视频一区 | www.激情.com | 91国自产 | 久久99精品久久久久婷婷 | 久久久女女女女999久久 | 久久久久久久综合 | 97色伦网| 欧美日韩综合 | 欧美三区| 天天射美女 | 国产精品视屏 | 91精品久久久久久久久久 | avtt国产| 一区二区视频 | 一区二区三区高清 | 日本欧美国产 | 四虎永久免费黄色影片 | 国产一区二区三区久久久久久久久 | 日韩精品一区二区三区久久 | 日韩欧美在线观看 | 日本久久精品视频 | 国产精品a免费一区久久电影 | 国内精品成人 | www久久av |