Home > Web Front-end > H5 Tutorial > body text

纯js和CSS3炫酷自动幻灯片特效

ringa_lee
Release: 2018-05-11 16:35:40
Original
3544 people have browsed it

简要教程
  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>
Copy after login

复制代码 

HTML结构  创建一个带ID号的<p>,然后设置它的宽度和高度,并将第一张图片放置在这个<p>中。
<p id="slider" style="width: 900px; height: 505px; margin: auto;"> 
<img src="images/1.jpg" > 
</p>
Copy after login

复制代码

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");
Copy after login

复制代码

 初始化插件  要初始化该幻灯片插件,可以创建3个变量:一个图片数组,图片显示的时间和当前图片的下标。
var images = ["images/1.jpg" , "images/2.jpg" , "images/3.jpg", "images/4.jpg" ];
var timing = 3000;
var currentImg = 1;
Copy after login

复制代码

 然后创建一个函数来选择下一张图片,并可以设置过渡到下一张图片时的动画效果。
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;
}
Copy after login

复制代码

最后使用setInterval()函数来调用这个函数。
setInterval(function () { karrotSlider() } , timing);
Copy after login

  注意:所有的图片必须尺寸相同。如果想制作全屏幻灯片,可以在body结束之前调用fullScreen();函数。
   


Related labels:
ht
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!