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

　　使用方法
　　使用该幻灯片插件需要引入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>
    

复制代码　

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

复制代码

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(); 函数。
　　

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！