html5页面中纯js和CSS3实现炫酷自动幻灯片特效的方法-创新互联

小编给大家分享一下html5页面中纯js和CSS3实现炫酷自动幻灯片特效的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

通道网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联建站2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站


Karrot Slider是一款纯Javascript和CSS3制作的自动播放的幻灯片插件。该幻灯片没有任何外部依赖,内置有8种不同的动画过渡效果。该幻灯片支持响应式图片设计模式,也可以制作为全屏幻灯片模式。

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


 
 
HTML结构  创建一个带ID号的

,然后设置它的宽度和高度,并将第一张图片放置在这个

中。    

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实现炫酷自动幻灯片特效的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网站题目:html5页面中纯js和CSS3实现炫酷自动幻灯片特效的方法-创新互联
新闻来源:http://scyanting.com/article/decpeh.html