找回密码
当前位置：前端开发者 > jQuery > 正文

Jquery实例效果—加载条和自动轮播图

2018-11-13 20:54:17 分类：jQuery 阅读(243) 评论(0)
前端开发写代码之前的准备
编写高质量代码 web前端开发修炼之道
wep前端开发代码

html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <title></title>
        <script
            language=”javascript”
            src=”http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js”
        ></script>
        <script language=”javascript”>
            $(function () {
                var start = 0;
                var loadDom = $(“.load>.loadLine”);
                var loadWdth = loadDom.css(“width”);
                var info = setInterval(num, 20);
                loadDom.animate({ width: “100%” }, 2000, function () {
                    $(“.content”).slideDown(1000);
                    var info1 = setInterval(autoImg, 1500);
                });
                function num() {
                    start = start + 1;
                    loadDom.text(“loading” + (start) + “%”);
                    console.log(start);
                    if (start == 100) {
                        clearInterval(info);
                    }
                }
                function autoImg() {
                    var ulDom = $(“#ulDom”);
                    var leftNum = parseInt(ulDom.css(“left”));
                    ulDom.animate({ left: leftNum – 148 + “px” }, 500, function () {
                        var li = ulDom.children()[0];
                        li.remove();
                        ulDom.append(li);
                        ulDom.css(“left”, “0px”);
                    });
                }
            }) < br />
        </script>
        <style type=”text/css”>
            html,
            body {
                padding: 0px;
                margin: 0px;
                background: #c3c6c9;
                font-family: ‘微软雅黑’;
            }
            .boxDom {
                width: 600px;
                height: auto;
                margin: 100px auto;
                padding: 20px;
                background: #e4e6e7;
                box-shadow: 0px 0px 6px #666;
            }
            h2 {
                margin-top: 0px;
                text-align: center;
            }
            .load {
                border: 1px solid #999;
                background: -webkit-linear-gradient(top, #ccc, #eee, #fff);
                box-shadow: 0px 2px 4px #999;
                width: 560px;
                height: 30px;
                border-radius: 60px;
                margin: 20px auto;
            }
            .loadLine {
                background: #8fd95b;
                width: 0px;
                height: 30px;
                border-radius: 60px;
                line-height: 1.8em;
                text-align: center;
            }
            .content {
                display: none;
                overflow: hidden;
                position: relative;
                height: 140px;
            }
            .content ul {
                position: absolute;
                left: 0px;
                padding: 0px;
                margin: 0px;
                width: 1192px;
                height: 140px;
                list-style: none;
            }
            .content ul li {
                float: left;
                margin-left: 8px;
            }
            .content ul li img {
                width: 140px;
            }
        </style>
    </head>
    <body>
        <div class=”boxDom”>
            <h2>Loading…</h2>
            <div class=”load”><div class=”loadLine”></div></div>
            <div class=”content”>
                <ul id=”ulDom”>
                    <li>
                        <img
                            src=”http://img.hoop8.com/attachments/1602/5342062172999.jpg”
                            alt=”1″
                        />
                    </li>
                    <li>
                        <img
                            src=”http://img.hoop8.com/attachments/1602/5312062172999.jpg”
                            alt=”2″
                        />
                    </li>
                    <li>
                        <img
                            src=”http://img.hoop8.com/attachments/1602/5262062172999.jpg”
                            alt=”3″
                        />
                    </li>
                    <li>
                        <img
                            src=”http://img.hoop8.com/attachments/1602/5222062172999.jpg”
                            alt=”4″
                        />
                    </li>
                    <li>
                        <img
                            src=”http://img.hoop8.com/attachments/1602/5172062172999.jpg”
                            alt=”5″
                        />
                    </li>
                    <li>
                        <img
                            src=”http://img.hoop8.com/attachments/1602/5122062172999.jpg”
                            alt=”6″
                        />
                    </li>
                    <li>
                        <img
                            src=”http://img.hoop8.com/attachments/1602/5052062172999.jpg”
                            alt=”7″
                        />
                    </li>
                    <li>
                        <img
                            src=”http://img.hoop8.com/attachments/1602/4592062172999.jpg”
                            alt=”8″
                        />
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>
web前端开发的代码编辑器
前端代码开发规范
前端代码能开发吗
» 本文来自：前端开发者 » 《Jquery实例效果—加载条和自动轮播图》
» 本文链接地址：https://www.rokub.com/6396.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论