zoukankan      html  css  js  c++  java
  • 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码。这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效。效果图如下:

    在线预览   源码下载

    实现的代码。

    html代码:

     <div class="pic">
            <ul>
                <li style="background: url(images/bg1.jpg) center;">
                    <img src="images/con1.png">
                    <div class="nav">
                    </div>
                    <div class="bar">
                        <p>
                        </p>
                    </div>
                </li>
                <li style="background: url(images/bg2.jpg) center;">
                    <img src="images/con2.png">
                    <div class="nav">
                    </div>
                    <div class="bar">
                        <p>
                        </p>
                    </div>
                </li>
                <li style="background: url(images/bg3.jpg) center;">
                    <img src="images/con3.png">
                    <div class="nav">
                    </div>
                    <div class="bar">
                        <p>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            var i = 0;
            jummper();
            function jummper() {
                $(".pic ul li").eq(i).find("img").css("left", "-1180px");
                $(".pic ul li").eq(i).find("p").css("width", "0px");
                $(".pic ul li").eq(i).find("img").animate({ left: "0px" }, 500, function () {
                    //当图片移动完成后再加载进度条
                    //alert("当图片移动完成后再做操作");
                    $(".pic ul li").eq(i).find("p").animate({  "1174px" }, 8000, function () {
                        $(".pic ul li").eq(i).find("img").animate({ left: "1180px" }, 500, function () {
                            i++;
                            if (i > 2)
                                i = 0;
                            $(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
                        });
                    });
                });
            }
            setInterval("jummper()", 9100);
        </script>

    via:http://www.w2bc.com/Article/35027

  • 相关阅读:
    Ansible跳板机自动部署
    nginx展示文件目录
    【转】消息钩子注册浅析
    windows临界区
    windbg定位死锁
    Windows工作集内存
    我的spring boot,杨帆、起航!
    CursorFileManager对cursor文件的读写
    eclipse执行maven install命令时跳过test
    bASE--Risk
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4467983.html
Copyright © 2011-2022 走看看