pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

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

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() {

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

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

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

  31. }               
復制代碼

  最后使用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優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 浙江宝泉阀门有限公司 | CE认证_产品欧盟ROHS-REACH检测机构-商通检测| 双齿辊破碎机-大型狼牙破碎机视频-对辊破碎机价格/型号图片-金联机械设备生产厂家 | 暴风影音| 培训无忧网-教育培训咨询招生第三方平台| 悬浮拼装地板_幼儿园_篮球场_悬浮拼接地板-山东悬浮拼装地板厂家 | GAST/BRIWATEC/CINCINNATI/KARL-KLEIN/ZIEHL-ABEGG风机|亚喜科技 | 复合土工膜厂家|hdpe防渗土工膜|复合防渗土工布|玻璃纤维|双向塑料土工格栅-安徽路建新材料有限公司 | 广州冷却塔维修厂家_冷却塔修理_凉水塔风机电机填料抢修-广东康明节能空调有限公司 | 服务器之家 - 专注于服务器技术及软件下载分享 | 加中寰球移民官网-美国移民公司,移民机构,移民中介,移民咨询,投资移民 | 轴流风机-鼓风机-离心风机-散热风扇-罩极电机,生产厂家-首肯电子 | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 美国查特CHART MVE液氮罐_查特杜瓦瓶_制造全球品质液氮罐 | 工业淬火油烟净化器,北京油烟净化器厂家,热处理油烟净化器-北京众鑫百科 | 不锈钢钢格栅板_热浸锌钢格板_镀锌钢格栅板_钢格栅盖板-格美瑞 | 工业PH计|工业ph酸度计|在线PH计价格-合肥卓尔仪器仪表有限公司 济南画室培训-美术高考培训-山东艺霖艺术培训画室 | 灌木树苗-绿化苗木-常绿乔木-价格/批发/基地 - 四川成都途美园林 | 三板富 | 专注于新三板的第一垂直服务平台 | 郑州巴特熔体泵有限公司专业的熔体泵,熔体齿轮泵与换网器生产厂家 | 异噻唑啉酮-均三嗪-三丹油-1227-中北杀菌剂厂家 | 聚合氯化铝-碱式氯化铝-聚合硫酸铁-聚氯化铝铁生产厂家多少钱一吨-聚丙烯酰胺价格_河南浩博净水材料有限公司 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 深圳市源和塑胶电子有限公司-首页 | 阴离子聚丙烯酰胺价格_PAM_高分子聚丙烯酰胺厂家-河南泰航净水材料有限公司 | 全自动包装秤_全自动上袋机_全自动套袋机_高位码垛机_全自动包装码垛系统生产线-三维汉界机器(山东)股份有限公司 | 防火阀、排烟防火阀、电动防火阀产品生产销售商-德州凯亿空调设备有限公司 | 短信营销平台_短信群发平台_106短信发送平台-河南路尚 | 快速门厂家批发_PVC快速卷帘门_高速门_高速卷帘门-广州万盛门业 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 订做不锈钢_不锈钢定做加工厂_不锈钢非标定制-重庆侨峰金属加工厂 | 硬质合金模具_硬质合金非标定制_硬面加工「生产厂家」-西迪技术股份有限公司 | 智慧食堂_食堂管理系统_食堂订餐_食堂消费系统—客易捷 | 中式装修设计_全屋定制家具_实木仿古门窗花格厂家-喜迎门 | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 | 芜湖厨房设备_芜湖商用厨具_芜湖厨具设备-芜湖鑫环厨具有限公司 控显科技 - 工控一体机、工业显示器、工业平板电脑源头厂家 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 水性漆|墙面漆|木器家具漆|水漆涂料_晨阳水漆官网 | 餐饮加盟网_特色餐饮加盟店_餐饮连锁店加盟 | 骨密度检测仪_骨密度分析仪_骨密度仪_动脉硬化检测仪专业生产厂家【品源医疗】 | 合肥白癜风医院_[治疗白癜风]哪家好_合肥北大白癜风医院 | 上海皓越真空设备有限公司官网-真空炉-真空热压烧结炉-sps放电等离子烧结炉 |