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

1
2
<link href="css/slider.css?7.1.33" rel="stylesheet" type="text/css" /> 
<script src="js/sliderEffects.js?7.1.33"></script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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");

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
然后创建一个函数来选择下一张图片，并可以设置过渡到下一张图片时的动画效果。
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;
}

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