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優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 选矿设备,选矿生产线,选矿工艺,选矿技术-昆明昆重矿山机械 | 铝机箱_铝外壳加工_铝外壳厂家_CNC散热器加工-惠州市铂源五金制品有限公司 | 防火板_饰面耐火板价格、厂家_品牌认准格林雅 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 影像测量仪_三坐标测量机_一键式二次元_全自动影像测量仪-广东妙机精密科技股份有限公司 | 数码听觉统合训练系统-儿童感觉-早期言语评估与训练系统-北京鑫泰盛世科技发展有限公司 | 骨灰存放架|骨灰盒寄存架|骨灰架厂家|智慧殡葬|公墓陵园管理系统|网上祭奠|告别厅智能化-厦门慈愿科技 | 厌氧反应器,IC厌氧反应器,厌氧三相分离器-山东创博环保科技有限公司 | 工业设计,人工智能,体验式3D展示的智能技术交流服务平台-纳金网 J.S.Bach 圣巴赫_高端背景音乐系统_官网 | 818手游网_提供当下热门APP手游_最新手机游戏下载 | 矿用履带式平板车|探水钻机|气动架柱式钻机|架柱式液压回转钻机|履带式钻机-启睿探水钻机厂家 | 深圳公司注册-工商注册代理-注册公司流程和费用_护航财税 | 分轨 | 上传文件,即刻分离人声和伴奏| 工业设计,人工智能,体验式3D展示的智能技术交流服务平台-纳金网 J.S.Bach 圣巴赫_高端背景音乐系统_官网 | 合肥通道闸-安徽车牌识别-人脸识别系统厂家-安徽熵控智能技术有限公司 | 上海小程序开发-小程序制作-上海小程序定制开发公司-微信商城小程序-上海咏熠 | 苹果售后维修点查询,苹果iPhone授权售后维修服务中心 – 修果网 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | 集装箱展厅-住人集装箱住宿|建筑|房屋|集装箱售楼处-山东锐嘉科技工程有限公司 | 伟秀电气有限公司-10kv高低压开关柜-高低压配电柜-中置柜-充气柜-欧式箱变-高压真空断路器厂家 | 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 | CTAB,表面活性剂1631溴型(十六烷基三甲基溴化铵)-上海升纬化工原料有限公司 | 变压器配件,变压器吸湿器,武强县吉口变压器配件有限公司 | 防爆鼓风机-全风-宏丰鼓风机-上海梁瑾机电设备有限公司 | 主题班会网 - 安全教育主题班会,各类主题班会PPT模板 | 分光色差仪,测色仪,反透射灯箱,爱色丽分光光度仪,美能达色差仪维修_苏州欣美和仪器有限公司 | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | HYDAC过滤器,HYDAC滤芯,现货ATOS油泵,ATOS比例阀-东莞市广联自动化科技有限公司 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 数控车床-立式加工中心-多功能机床-小型车床-山东临沂金星机床有限公司 | 智能汉显全自动量热仪_微机全自动胶质层指数测定仪-鹤壁市科达仪器仪表有限公司 | 万博士范文网-您身边的范文参考网站Vanbs.com | 机构创新组合设计实验台_液压实验台_气动实训台-戴育教仪厂 | 密封圈_泛塞封_格莱圈-[东莞市国昊密封圈科技有限公司]专注密封圈定制生产厂家 | 苏州柯瑞德货架-仓库自动化改造解决方案 | 煤机配件厂家_刮板机配件_链轮轴组_河南双志机械设备有限公司 | 冷库安装厂家_杭州冷库_保鲜库建设-浙江克冷制冷设备有限公司 | 实验室装修_实验室设计_实验室规划设计- 上海广建净化工程公司 | 北京网站建设|北京网站开发|北京网站设计|高端做网站公司 | 3d打印服务,3d打印汽车,三维扫描,硅胶复模,手板,快速模具,深圳市精速三维打印科技有限公司 |