图片滚效果页面 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <style>
        .mgauto {
            margin: 0 auto;
        }
        /*轮播样式*/
        .pa_banner {
            height: 330px;
            width: 100%;
        }

        #ty_picScroll2 {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

            #ty_picScroll2 .ty_tabInfo {
                height: 100%;
                width: 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;
                width: 100%;
            }

                #ty_picScroll2 .ty_tabBtns p {
                    width: 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;
                    width: 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;
width: 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>

　　

posted @ 2014-12-16 17:33  yjwpop  阅读(193)  评论(0)    收藏  举报