欢迎光临
我们一直在努力

轮播图切换进度条实时加载技术实现

轮播写法有多种展现形式,今天介绍的一款就是页面显示轮播切换进度条,当进度条走完就会切换下一个页面,所以简称:轮播图切换进度条实时加载技术实现

轮播图切换进度条实时加载技术实现-源码如下:

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
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>轮播图切换进度条实时加载技术实现</title>
    <!--css 衣服 化妆品 修饰作用-->
    <style>
        body {
            background: #ccc;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #banner {
            width: 100%;
            height: 490px;
            position: relative;
        }

        #banner #pic {
            width: 100%;
            height: 490px;
            position: relative;
            /*相对定位 参照物*/
        }

        #banner #pic ul li {
            list-style: none;
            width: 100%;
            height: 490px;
            position: absolute;
            /*绝对定位*/
            top: 0;
            left: 0;
            display: none;
            /*消失*/
        }

        #banner #pic ul {
            width: 100%;
            height: auto;
        }

        #banner #pic img {
            display: block;
            width: 100%;
        }

        #banner #car {
            width: 970px;
            height: 30px;
            position: absolute;
            left: 50%;
            margin-left: -485px;
            bottom: 2px;
        }

        #banner #car ul li {
            list-style: none;
            width: 240px;
            height: 15px;
            margin-right: 2px;
            float: left;
            /*左浮动*/
            color: #fff;
        }

        #banner #car ul.car-b li {
            background: #fff;
            background: #000;

        }

        #banner #car ul.car-b li p {
            width: 0;
            height: 15px;
            background: red;
        }
    </style>
</head>

<body>
    <!--姓名=“张三”  英文  见名知义-->
    <div id="banner">
        <div id="pic">
            <ul>
                <li style="display:block"><a href="http://www.baidu.com"><img src="images/1.jpg" /></a></li>
                <li><a href=""><img src="images/2.jpg" /></a></li>
                <li><a href=""><img src="imag   es/3.jpg" /></a></li>
                <li><a href=""><img src="images/4.jpg" /></a></li>
            </ul>
        </div>
        <div id="car">
            <!-- <ul class="num">
                <li>01</li>
                <li>02</li>
                <li>03</li>
                <li>04</li>
            </ul> -->
            <ul class="car-b">
                <li>
                    <p></p>
                </li>
                <li>
                    <p></p>
                </li>
                <li>
                    <p></p>
                </li>
                <li>
                    <p></p>
                </li>
            </ul>
        </div>
    </div>
    <script src="js/jquery.js"></script>
    <script>
        //熟悉运用jq里面方法
        //如何去获取对象  $('元素对象');
        var picLi = $('#banner #pic ul li'); //图片对象
        var carLi = $('#banner #car ul.car-b li'); //进度条
        //animate    第一个值{}动画改变的样式值  第二值动画需要的时间  第三个值 动画执行完过后还要做什么
        var i = 0;
        autoplay();

        function autoplay() {
            carLi.eq(i).find('p').animate({
                width: '100%'
            }, 3000, function () {
                carLi.eq(i).find('p').css({
                    width: 0
                });
                i++;
                if (i > 3) {
                    i = 0;
                }
                picLi.eq(i).fadeIn(1000).siblings().fadeOut(1000);

            });
        }
        //定时器
        setInterval('autoplay()', 4000);
    </script>
</body>

</html>

轮播图切换进度条实时加载技术实现-效果图-1如下:

轮播图切换进度条实时加载技术实现-效果图-2如下:

赞(0) 打赏
未经允许不得转载: » 轮播图切换进度条实时加载技术实现
分享到: 更多 (0)

评论标题 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    特效不错,博主发文章很用心

    前端开发2个月前 (10-03)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏