支付宝宽幅广告效果，带有滑动装置，鼠标滑过小图标广告自动切换，js实现
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<link href="css/css.css" rel="stylesheet" type="text/css" />
在网页<body>区添加以下代码
<DIV id=J_banner_show class=banner style="margin:0 auto;">
<DIV class=banner-img>
<DIV class=banner-explain>
<DL class=wsgw>
<DT><A href="http://www.sharejs.com/" target="_blank"><SPAN>网上购物</SPAN></A> </DT>
<DD>
<UL>
<LI class=intro><A href="http://www.sharejs.com/" target="_blank">查看详细介绍</A></LI></UL></DD></DL></DIV>
<DIV class=banner-explain>
<DL class=sfk>
<DT><A href="http://www.sharejs.com/" target="_blank"><SPAN>收付款</SPAN></A> </DT>
<DD>
<UL>
<LI class=banner-btn><A href="http://www.sharejs.com/" target="_blank"><SPAN>现在就去付款</SPAN></A></LI>
<LI class=banner-btn><A href="http://www.sharejs.com/" target="_blank"><SPAN>现在就去收款</SPAN></A></LI></UL></DD></DL></DIV>
<DIV class=banner-explain>
<DL class=txf>
<DT><A href="http://www.sharejs.com/"><SPAN>通讯费</SPAN></A> </DT>
<DD>
<UL>
<LI class=banner-btn><A href="http://www.sharejs.com/" target="_blank"><SPAN>现在就去缴费</SPAN></A></LI>
<LI class=intro><A href="http://www.sharejs.com/" target="_blank">使用说明</A></LI></UL></DD></DL></DIV>
<DIV class=banner-explain>
<DL class=sdmjf>
<DT><A href="http://www.sharejs.com/" target="_blank"><SPAN>水电煤缴费</SPAN></A> </DT>
<DD class=sdmjf>
<UL>
<LI class=banner-btn><A href="http://www.sharejs.com/" target="_blank"><SPAN>现在就去缴费</SPAN></A></LI>
<LI class=intro><A href="http://www.sharejs.com/" target="_blank">使用说明</A></LI></UL></DD></DL></DIV>
<DIV class=banner-explain>
<DL class=xykhk>
<DT><A href="http://www.sharejs.com/" target="_blank"><SPAN>信用卡还款</SPAN></A> </DT>
<DD class=xykhk>
<UL>
<LI class=banner-btn><A href="http://www.sharejs.com/" target="_blank"><SPAN>现在就去还款</SPAN></A></LI>
<LI class=intro><A href="http://www.sharejs.com/" target="_blank">使用说明</A></LI></UL></DD></DL></DIV>
<DIV class=banner-explain>
<DL class=slj>
<DT><A href="http://www.sharejs.com/" target="_blank"><SPAN>送礼金</SPAN></A> </DT>
<DD>
<UL>
<LI class=banner-btn><A href="http://www.sharejs.com/" target="_blank"><SPAN>现在就去送礼金</SPAN></A></LI>
<LI class=intro><A href="http://www.sharejs.com/" target="_blank">使用说明</A></LI></UL></DD></DL></DIV>
<DIV class=banner-explain>
<DL class=jfz>
<DT><A href="http://www.sharejs.com/" target="_blank"><SPAN>交房租</SPAN></A> </DT>
<DD>
<UL>
<LI class=banner-btn><A href="http://www.sharejs.com/" target="_blank"><SPAN>现在就去交房租</SPAN></A></LI>
<LI class=intro><A href="http://www.sharejs.com/" target="_blank">使用说明</A></LI></UL></DD></DL></DIV>
<DIV class=banner-explain>
<DL class=aask>
<DT><A href="http://www.sharejs.com/" target="_blank"><SPAN>AA收款</SPAN></A> </DT>
<DD>
<UL>
<LI class=banner-btn><A href="http://www.sharejs.com/" target="_blank"><SPAN>现在就发起收款</SPAN></A></LI>
<LI class=intro><A href="http://www.sharejs.com/" target="_blank">使用说明</A></LI></UL></DD></DL></DIV></DIV>
<DIV id=J_banner_action_panel class=banner-icon></DIV></DIV>
<SCRIPT type=text/javascript charset=utf-8 src="js/xixi.js"></SCRIPT>
<SCRIPT type=text/javascript charset=utf-8 src="js/index.js"></SCRIPT>
<SCRIPT type=text/javascript>
(function() {
E.onDOMReady(function() {
//BANNER区域图片数据初始化
var bannerImg = [
{
'title': '网上购物',
'banner': 'images/bn-wsgw.jpg',
'dlClass': 'wsgw'
},
{
'title': '收付款',
'banner': 'images/bn-sfk.jpg',
'dlClass': 'sfk'
},
{
'title': '通讯费',
'banner': 'images/bn-txf.jpg',
'dlClass': 'txf'
},
{
'title': '水电煤缴费',
'banner': 'images/bn-sdmjf.jpg',
'dlClass': 'sdmjf'
},
{
'title': '信用卡还款',
'banner': 'images/bn-xykhk.jpg',
'dlClass': 'xykhk'
},
{
'title': '送礼金',
'banner': 'images/bn-slj.jpg',
'dlClass': 'slj'
},
{
'title': '交房租',
'banner': 'images/bn-jfz.jpg',
'dlClass': 'jfz'
},
{
'title': 'AA收款',
'banner': 'images/bn-aask.jpg',
'dlClass': 'aask'
}
];
new AP.pk.pa.slideshowIndex({banners: '.banner-explain',delay : 10000},bannerImg);
});
})();
</SCRIPT>
