undefined

图片切换及函数合并

发表于 | 分类于 ，
字数统计: 643 | 阅读时长 ≈ 4

图片切换

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    p {
        margin: 0;
    }

    body {
        text-align: center;
    }

    #box {
        width: 400px;
        height: 400px;
        border: 10px solid #ccc;
        margin: 50px auto 0;
        position: relative;
    }

    a {
        width: 40px;
        height: 40px;
        background: #fff;
        filter: alpha(opacity:80);
        opacity: 0.8;
        position: absolute;
        top: 160px;
        font-size: 18px;
        color: #000;
        text-align: center;
        line-height: 40px;
        text-decoration: none;
    }

    a:hover {
        filter: alpha(opacity:30);
        opacity: 0.3;
    }

    #prev {
        left: 10px;
    }

    #next {
        right: 10px;
    }

    #p1 {
        width: 400px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #000;
        color: #fff;
        font-size: 14px;
        filter: alpha(opacity:80);
        opacity: 0.8;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    strong {
        width: 400px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #000;
        color: #fff;
        font-size: 14px;
        filter: alpha(opacity:80);
        opacity: 0.8;
        position: absolute;
        top: 0;
        left: 0;
    }

    #img1 {
        width: 400px;
        height: 400px;
    }

    span {
        position: absolute;
        width: 400px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        top: -50px;
        left: 0;
        font-family: '微软雅黑';
    }
    </style>
    <script>
    window.onload = function() {
        var oPrev = document.getElementById('prev');
        var oNext = document.getElementById('next');
        var oP = document.getElementById('p1');
        var oStrong = document.getElementById('strong1');
        var oImg = document.getElementById('img1');
        var aBtn = document.getElementsByTagName('input');

        var arrUrl = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];
        var arrText = ['文字一', '文字二', '文字三', '识文断字'];
        var num = 0;
        var onOff = true;

        aBtn[0].onclick = function() { onOff = true;
            document.getElementsByTagName('span')[0].innerHTML = '图片可从最后一张跳转到第一张循环切换'; };
        aBtn[1].onclick = function() { onOff = false;
            document.getElementsByTagName('span')[0].innerHTML = '图片只能到最后一张\或只能到第一张切换'; };

        // 初始化
        function fnTab() {
            oP.innerHTML = arrText[num];
            oStrong.innerHTML = num + 1 + ' / ' + arrText.length;
            oImg.src = arrUrl[num];
        }
        fnTab();

        oPrev.onclick = function() {
            num--;
            if (num == -1) {
                if (onOff) { num = arrText.length - 1; } else {
                    alert('这已经是第一张了，不能再往前了~~');
                    num = 0;
                }
                //num = arrText.length-1;
            }
            fnTab();
        };
        oNext.onclick = function() {
            num++;
            if (num == arrText.length) {
                if (onOff) { num = 0; } else {
                    alert('已经到最后一张啦~');
                    num = arrText.length - 1;
                }
            }
            fnTab();
        };

    };
    </script>
</head>

<body>
    <input type="button" value="循环切换" />
    <input type="button" value="顺序切换" />
    <div id="box"><span>图片可从最后一张跳转到第一张循环切换</span>
        <a id="prev" href="javascript:;">
            <</a>
                <a id="next" href="javascript:;">></a>
                <p id="p1">图片文字加载中……</p>
                <strong id="strong1">图片数量计算中……</strong>
                <img id="img1" />
    </div>
</body>

</html>
觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多