<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |