Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://a.alipayobjects.com/al/alice.common.homeindexSimple-1.3.css">
      <!--[if IE]>
    <style type="text/css">
      .pic, .txt, .bg {
        opacity: 1;
      }
      #banner .txt {
        top: 50px;
        left: 0;
      }
      #banner .pic-4,#banner .pic-1, #banner .pic-2 {
        left: 0;
      }
      #banner .pic-3 {
        left: 46%;
      }
    </style>
    <![endif]-->
    <style type="text/css">
      .pic-4 { height: 400px; }
      .pic-1 { height: 264px; }
      .pic-2 { width:100%; height: 170px; left:0;}
      .pic-3 { width: 280px; height: 350px; left: 46%;}
      
      .slide-4 .bg-4, .slide-4 .pic-4, .slide-4 .txt-4 { display: block; opacity: 1;}
      
      .slide-1 .txt-4, .slide-2 .txt-4, .slide-3 .txt-4 { top: 0; }
      .slide-1 .pic-4, .slide-2 .pic-4, .slide-3 .pic-4 { left: -14px; }
      
      .slide-4 .txt-1, .slide-2 .txt-1, .slide-3 .txt-1 { top: 160px; }
    .slide-4 .pic-1, .slide-2 .pic-1, .slide-3 .pic-1 { left: 14px; }
    
    .slide-4 .txt-2, .slide-1 .txt-2, .slide-3 .txt-2 { top: 0px; left:0;}
      .slide-4 .pic-2, .slide-1 .pic-2, .slide-3 .pic-1 { left: -14px; }
    .slide-4 .txt-3, .slide-1 .txt-3, .slide-2 .txt-3 { left: -100px; }
    .slide-4 .pic-3, .slide-1 .pic-3, .slide-2 .pic-3 { left: 47%; }
    /*----------- lazyloadBanner ---------------*/
    .bg-1 { _background-image: url(https://i.alipayobjects.com/e/201207/3269J2hndR.jpg);}
    .bg-2 { _background-image: url(https://i.alipayobjects.com/e/201207/3269bfDi6r.jpg);}
    .bg-3 { _background-image: url(https://i.alipayobjects.com/e/201207/3269tKiSzx.jpg);}
    .pic-1 { _background: none; }
    .pic-2 { _background: none; }
    .pic-3 { _background: none; }
    .txt-1 { _background: none; }
    .txt-2 { _background: none; }
    .txt-3 { _background: none; }
    
    .bg-1-lazy { background-image: url(https://i.alipayobjects.com/e/201207/3267oSyvSL.jpg); _background-image: url(https://i.alipayobjects.com/e/201207/3269J2hndR.jpg);}
    .bg-2-lazy { background-image: url(https://i.alipayobjects.com/e/201207/3268hSVxzd.jpg); _background-image: url(https://i.alipayobjects.com/e/201207/3269bfDi6r.jpg);}
    .bg-3-lazy { background-image: url(https://i.alipayobjects.com/e/201207/3268yusnYv.jpg); _background-image: url(https://i.alipayobjects.com/e/201207/3269tKiSzx.jpg);}
    .pic-1-lazy { background: url('https://i.alipayobjects.com/e/201207/326ABFDuHR.png') no-repeat 50% 50%; _background: none; }
    .pic-2-lazy { background-image: url('https://i.alipayobjects.com/e/201206/3JsobJiBY3.png'); _background: none; }
    .pic-3-lazy { background: url('https://i.alipayobjects.com/e/201206/3JsobJQyx1.png') no-repeat 50% 50%; _background: none;}
    .txt-1-lazy { background-image: url(https://i.alipayobjects.com/e/201206/3K0HzaVmnb.png); _background: none;}
    .txt-2-lazy { background-image: url(https://i.alipayobjects.com/e/201206/3K0HzZySyx.png); _background: none;}
    .txt-3-lazy { background-image: url(https://i.alipayobjects.com/e/201206/3K0Hzaov3z.png); _background: none;}
      
      .bg-4 { _background-image: url(https://i.alipayobjects.com/e/201208/3lQRKoRWk7.jpg);}
      .pic-4 { _background: none; }
      .txt-4 { _background: none; }
      .bg-4-lazy { background-image: url(https://i.alipayobjects.com/e/201208/3lQRQbAfpr.jpg); _background-image: url(https://i.alipayobjects.com/e/201208/3lQRKoRWk7.jpg);}
      .pic-4-lazy { background: url('https://i.alipayobjects.com/e/201208/3lRnqvxzk3.png') no-repeat 50% 50%; _background: none; }
      .txt-4-lazy { background-image: url(https://i.alipayobjects.com/e/201208/3lQRQcyjHn.png); _background: none;}
    </style>
  <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/arale.core-1.1.js"></script>
    <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/arale.class-1.0.js"></script> 
    <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/arale.tmpl-1.0.js"></script> 
    <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/arale.aspect-1.0.js"></script> 
    <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/aralex.base-1.1.js"></script> 
    <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/arale.fx-1.1.js"></script> 
  <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/aralex.switchable-1.1.js"></script>
    <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/aralex.slider.ScrollSlider-1.5.js"></script> 
    <script type="text/javascript" src="https://a.alipayobjects.com/ar/??/aralex.slider.FadeSlider-1.2.js"></script> 
</head>
<body>
    <div id="banner" class="slide-4" coor-rate="0.1" coor="default-banner" role="banner">
      
      <ul id="J-slide">
        <!-- XT:支付宝首页/默认频道/支付宝新首页开始:www.alipay.com/i/indexb.vm -->        <li class="slide">
        <div class="bg bg-1 J_lazyloadBanner bg-1-lazy" data-class="bg-1-lazy"></div>
        <div class="pic pic-1 J_lazyloadBanner pic-1-lazy" data-class="pic-1-lazy"></div>
        <div class="txt-wrap">
          <div class="txt txt-1 J_lazyloadBanner txt-1-lazy" data-class="txt-1-lazy">
            <h3>购物支付 快速安全</h3>
            <p>无需网银 3步完成购物支付</p>
            <a href="https://kuai.alipay.com/express/index.htm" target="_blank" title="立即体验" hidefocus="true" seed="txt-link" smartracker="on">立即体验</a>
          </div>
        </div>
        </li>
        <!-- XT:支付宝首页/默认频道/支付宝新首页结束:www.alipay.com/i/indexb.vm -->        <!-- XT:支付宝首页/默认频道/支付宝新首页开始:www.alipay.com/i/indexb.vm -->        <li class="slide">
        <div class="bg bg-2 J_lazyloadBanner bg-2-lazy" data-class="bg-2-lazy"></div>
        <div class="pic pic-2 J_lazyloadBanner pic-2-lazy" data-class="pic-2-lazy"></div>
        <div class="txt-wrap">
          <div class="txt txt-2 J_lazyloadBanner txt-2-lazy" data-class="txt-2-lazy">
            <h3>生活支付 轻松便捷</h3>
            <p>在家也能缴费还款</p>
            <a href="https://app.alipay.com/container/web/index.htm" target="_blank" title="立即体验" hidefocus="true" seed="txt-linkT1" smartracker="on">立即体验</a>
          </div>
        </div>
        </li>
        <!-- XT:支付宝首页/默认频道/支付宝新首页结束:www.alipay.com/i/indexb.vm -->        <!-- XT:支付宝首页/默认频道/支付宝新首页开始:www.alipay.com/i/indexb.vm -->        <li class="slide">
        <div class="bg bg-3 J_lazyloadBanner bg-3-lazy" data-class="bg-3-lazy"></div>
        <div class="pic pic-3 J_lazyloadBanner pic-3-lazy" data-class="pic-3-lazy"></div>
        <div class="txt-wrap">
          <div class="txt txt-3 J_lazyloadBanner txt-3-lazy" data-class="txt-3-lazy">
            <h3>把支付宝随身带</h3>
            <p>随时随地用支付宝</p>
            <a href="http://mobile.alipay.com/index.htm" target="_blank" title="立即体验" hidefocus="true" seed="txt-linkT2" smartracker="on">立即体验</a>
          </div>     
        </div>
        </li>
        <!-- XT:支付宝首页/默认频道/支付宝新首页结束:www.alipay.com/i/indexb.vm -->        <!-- XT:支付宝首页/默认频道/支付宝新首页开始:www.alipay.com/i/indexb.vm -->        
        <li class="slide">
        <div class="bg bg-4 J_lazyloadBanner bg-4-lazy" data-class="bg-4-lazy"></div>
        <div class="pic pic-4 J_lazyloadBanner pic-4-lazy" data-class="pic-4-lazy"></div>
        <div class="txt-wrap">  
          <div class="txt txt-4 J_lazyloadBanner txt-4-lazy" data-class="txt-4-lazy">
            <h3>万变支付 我用支付宝</h3>
            <p>支付不止全网购物,支付不止生活缴费,支付随时随地随心。</p>
            <a href="http://fun.alipay.com/my/index.htm?_adType=ahbebccjecacigehfahb" target="_blank" title="立即体验" hidefocus="true" seed="txt-linkT3" smartracker="on">立即体验</a>
          </div>               
        </div>
        </li>
        <!-- XT:支付宝首页/默认频道/支付宝新首页结束:www.alipay.com/i/indexb.vm -->      </ul>
      <div id="J-slide-number" class="slide-number">
        <!-- XT:支付宝首页/默认频道/支付宝新首页开始:www.alipay.com/i/indexb.vm -->      
          <a href="#" class="slide-number-active" hidefocus="true" seed="JSlideNumber-slideNumberActive">1</a>
          <a href="#" hidefocus="true" seed="JSlideNumber-link"   class="">2</a>
          <a href="#" hidefocus="true" seed="JSlideNumber-linkT1"   class="">3</a>
          <a href="#" hidefocus="true" seed="JSlideNumber-linkT2"   >4</a>    
              <!-- XT:支付宝首页/默认频道/支付宝新首页结束:www.alipay.com/i/indexb.vm -->      </div>
            
          </div>
<script type="text/javascript">
      //banner图片轮转
    if (arale.isIE() && arale.browser.Engine.ie < 10) {
      Loader.use('aralex.slider.FadeSlider', function() {
        var fs = new aralex.slider.FadeSlider({
          id: "J-slide",
          triggerId: "J-slide-number",
          triggerEvent: "click",
          activeTriggerClass: 'slide-number-active',
          delay: 8000
        });
      });
    } else {
      (function() {
        var banner = document.getElementById('banner');
        var triggers = $$('#J-slide-number a');
        var index = 1;
        for (i = 0; i < triggers.length; i++) {
          var item = triggers[i];
          item.click(function(e) {
            e.preventDefault();
            slideTo(e.target.innerHTML);
          });
        }
        function slideTo(number) {
          index = parseInt(number);
          banner.className = 'slide-' + number;
          for (i = 0; i < triggers.length; i++) {
            triggers[i].removeClass('slide-number-active');
          }
          triggers[index - 1].addClass('slide-number-active');
        }
        var SLIDE;
        SLIDE = setInterval(function() {
          if (index >= 4) index = 0;
          index++;
          slideTo(index);
        }, 8000);
        E.on(banner, 'mouseover', function() {
          clearInterval(SLIDE);
        });
        E.on(banner, 'mouseout', function() {
          SLIDE = setInterval(function() {
            if (index >= 4) index = 0;
            index++;
            slideTo(index);
          }, 8000);
        });
      })();
    }
      E.on($$('#J-slide-number a'), 'click', function(e){
        e.preventDefault();
      });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers