封装好的轮播组件

原理:

就是通过修改每一张图片的透明度,让其每隔一段时间将其中的某一张图片透明度设为1,而其它的设为0,从而实现一种图片轮流播放的效果。

这种效果的思路比较简单,首先让一组图片绝对定位,让其重叠在一起,然后通过一个函数来控制图片的透明度变化。同时还有一个定时器,不停的除发这个函数,每次改变不同图片的透明度,让其显示。(更简单的效果是直接修改display属性,让该显示的图片display:block,而不显示的设为display:none就可以,只是效果上会差一些,但原理相同)

源码解析:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
    #imgs {
        width:1024px;
        height: 200px;
        overflow: hidden;
        /*用一个div把图片包含设置超出范围隐藏*/
    }
    </style>
</head>
<body>
    <ul id="imgs">
        <li><img src="1.jpg"></li>
        <li><img src="2.jpg"></li>
        <li><img src="3.jpg"></li>
        <li><img src="4.jpg"></li>
    </ul>
</body>
<script type="text/javascript">
var Carousel = function(parentID, childTag) {
    var imgs = document.getElementById(parentID);
    //获取父元素id
    var items = imgs.getElementsByTagName(childTag);
    //获取子元素标签
    var len = items.length;
    // 获取图片的个数
    var index = 0;
    // 定义并初始化一个变量。
    showItem();
    // 显示一张图片
    function showItem() {
        // 首先将所有图片透明度设为0
        hideItems();
        //调用hideItems();方法
        items[index].style.opacity = 1;
        // 将要显示的透明度改变让其显示
        if (index > len - 2) {
            index = 0;
        else {
            index++;
        }
        // 在这里用setTimeout模拟setInterval的效果
        setTimeout(showItem, 2500);
    }
    // 将所有图片透明度设为0
    function hideItems() {
        for (var i = 0; i < len; i++) {
            items[i].style.opacity = 0;
            //i是数组的索引,从0开始
        }
    }
};
Carousel('imgs''li');//插件方法调用
</script>
</html>

css3效果可以自己添加

虚拟主机
《你不知道的JavaScript(中卷)》PDF
《Node.js开发指南》PDF
《HTML5从入门到精通》PDF
《锋利的jQuery(第2版)》PDF
广告也精彩