• 图片滚效果页面


    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <style>
            .mgauto {
                margin: 0 auto;
            }
            /*轮播样式*/
            .pa_banner {
                height: 330px;
                 100%;
            }
    
            #ty_picScroll2 {
                 100%;
                height: 100%;
                overflow: hidden;
                position: relative;
            }
    
                #ty_picScroll2 .ty_tabInfo {
                    height: 100%;
                     2000px;
                    left: 50%;
                    margin-left: -1000px;
                    position: absolute;
                }
    
                #ty_picScroll2 .ty_tabBtns, #ty_picScroll2 .ty_pic, #ty_picScroll2 .ty_picMsg {
                    position: absolute;
                }
    
                #ty_picScroll2 .ty_tabBtns {
                    height: 40px;
                    bottom: 0px;
                    left: 0;
                    z-index: 2;
                     100%;
                }
    
                    #ty_picScroll2 .ty_tabBtns p {
                         178px;
                        line-height: 30px;
                    }
    
                    #ty_picScroll2 .ty_tabBtns span {
                        font-family: Verdana;
                        cursor: pointer;
                        background: url(http://bank.pingan.com/app_images/pingan/v30/newbank/icon-s.png) no-repeat;
                        _background: url(/app_images/pingan/v30/newbank/icon-s-ie6.png) no-repeat;
                        margin: 0 5px;
                         13px;
                        display: inline-block;
                        height: 13px;
                        background-position: 0 -60px;
                    }
    
                        #ty_picScroll2 .ty_tabBtns span.ty_current, .ml .links a, .wlt_link a, .cxtyq .links a {
                            color: #FF6600;
                        }
    
                        #ty_picScroll2 .ty_tabBtns span.ty_current {
                            background-position: 0 -80px;
                        }
    
                #ty_picScroll2 .ty_pic {
                    display: none;
                    filter: alpha(opacity=100);
                }
    
    
    
    
    
    
    
        </style>
        <script type="text/javascript" src="http://script2.pingan.com/app_js/pingan/v30/newbank/jquery-1.8.3.min.js" ></script>
       
        <script>
    
            //轮播广告
    
            var ty_picScroll2 = function (options) {
                var fa = this;
                var opts = {};
                var clear;
                this.init = function () {
                    opts = {
                        box: $("#" + options.box),
                        msg: (options.msg == undefined) ? true : options.msg,
                        auto: (options.auto == undefined) ? true : options.auto,
                        speed: options.speed || 5000,
                        flag: 0
                    }
                    opts.box.on("click", "span", function () {
                        clearInterval(clean);
                        clean = setInterval(fa.auto, options.speed);
                        var index = opts.box.find("span").index(this);
                        if (opts.flag != index) {
                            fa.picScroll2(index);
                            opts.flag = index;
                        }
                    })
    
                    if (opts.auto) {
                        clean = setInterval(fa.auto, options.speed);
                    }
                    if (!opts.msg) {
                        opts.box.find(".ty_picMsg").hide();
                    }
                }
                this.picScroll2 = function (obj) {
                    opts.box.find("span").removeClass("ty_current").eq(obj).addClass("ty_current");
                    opts.box.find(".ty_pic").fadeOut(500).eq(obj).fadeIn(500);
                    if (opts.msg) {
                        var msg = opts.box.find("a").eq(obj).attr("data-msg");
                        opts.box.find(".ty_picMsg").fadeIn(500).find("p").html(msg);
                    }
                };
    
                this.auto = function () {
                    var len = opts.box.find("span").length;
                    opts.flag++;
                    if (opts.flag > (len - 1)) opts.flag = 0;
                    fa.picScroll2(opts.flag);
                }
                this.init();
            }
    
            $(document).ready(function () {
                var picScroll2 = new ty_picScroll2({
                    box: "ty_picScroll2",        //盒子名称
                    msg: false,           //是否显示说明文字
                    auto: true,           //是否自动播放
                    speed: 5000           //轮播速度
                });
            });
    
        </script>
    </head>
    <body>
        <div style="height: 330px;
     100%;"> 
        <div id="ty_picScroll2" class="mgauto">
            <div class="ty_tabBtns mgauto">
                <p class="mgauto">
                    <span class="ty_current"></span>
                    <span class=""></span>
                    <span class=""></span>
                    <span class=""></span>
                    <span class=""></span>
                    <span class=""></span>
                </p>
            </div>
            <div class="ty_tabInfo">
                <iframe class="ty_pic" src="http://www.pingan.com/adms/area.ctrl?AREAID=QY13112919525930" allowtransparency="true" width="2000" height="330" frameborder="0" scrolling="no" style="display: none;" marginheight="0" marginwidth="0"></iframe>
                <iframe class="ty_pic" src="http://www.pingan.com/adms/area.ctrl?AREAID=QY13112919533731" allowtransparency="true" width="2000" height="330" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display: none;"></iframe>
                <iframe class="ty_pic" src="http://www.pingan.com/adms/area.ctrl?AREAID=QY13112919535232" allowtransparency="true" width="2000" height="330" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display: none;"></iframe>
                <iframe class="ty_pic" src="http://www.pingan.com/adms/area.ctrl?AREAID=QY13112919541133" allowtransparency="true" width="2000" height="330" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display: none;"></iframe>
                <iframe class="ty_pic" src="http://www.pingan.com/adms/area.ctrl?AREAID=QY13112919542734" allowtransparency="true" width="2000" height="330" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display: none;"></iframe>
                <iframe class="ty_pic" src="http://www.pingan.com/adms/area.ctrl?AREAID=QY13112919543935" allowtransparency="true" width="2000" height="330" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display: inline;"></iframe>
            </div>
        </div>
            </div>
    </body>
    </html>
    

      

  • 相关阅读:
    CCF-Python的内置函数们
    CCF2019-03-Python题解
    Find a Number (记忆化+BFS)
    LeetCode15:三数之和(双指针)
    LeetCode:不用加号的加法(位运算)
    剑指Offer43:1~n整数中1出现的次数(数位DP)
    LeetCode190:颠倒二进制(位运算分治! 时间复杂度O(1))
    LeetCode5716:好因子的最大数目(数学、快速幂)
    python学习笔记:python的字符串拼接效率分析
    LeetCode1806:还原排列的最少操作步数(置换群 or 模拟)
  • 原文地址:https://www.cnblogs.com/iwenwen/p/4167648.html
Copyright © 2020-2023  润新知