jquery 电商资讯新闻轮播及新闻动态TAB切换代码布局，jquery实现广告轮播自动滚动以及新闻动态tab切换效果， js css 分离，结构清晰简单，jquery区域均有备注注释，参数均可修改，企业建站常用效果下载即可使用。
使用方法
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>2、head引入js文件
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>3、body引入HTML代码
<div class="information-box"> <div class="information-con"> <div class="information-head"> <h2>电商资讯</h2> <p>及时了解国内外电商行业动态</p> </div> <div class="information-main clearfix"> <div class="information-main-fl"> <div class="bd"> <ul> <li> <img src="images/banner.jpg" alt=""> <div class="information-main-back"></div> <p class="information-main-text"> H5建站/商城产品买多年送多年 <a href="javascript:;" class="main-btn">活动详情</a> </p> </li> <li> <img src="images/banner.jpg" alt=""> <div class="information-main-back"></div> <p class="information-main-text"> H5建站/商城产品买多年送多年 <a href="javascript:;" class="main-btn">活动详情</a> </p> </li> <li> <img src="images/banner.jpg" alt=""> <div class="information-main-back"></div> <p class="information-main-text"> H5建站/商城产品买多年送多年 <a href="javascript:;" class="main-btn">活动详情</a> </p> </li> </ul> </div> <a href="javascript:void(0)" class="prev"></a> <a href="javascript:void(0)" class="next"></a> </div> <div class="information-main-fr"> <div class="hd clearfix"> <ul> <li class="on">新闻中心</li> <li>行业资讯</li> <li>电商干货</li> </ul> </div> <div class="bd"> <ul> <li> <span>2018-05-23</span> <a href="#" title="团队拓展训练，云指团队合力展风采">团队拓展训练，云指团队合力展风采</a> </li> <li> <span>2018-04-16</span> <a href="#" title="烈祝贺云指实力当选“广东企业创新500强...">烈祝贺云指实力当选“广东企业创新500强...</a> </li> <li> <span>2018-04-10</span> <a href="#" title="专注身边人和事，云指商圈小程序隆重上线">专注身边人和事，云指商圈小程序隆重上线</a> </li> <li> <span>2018-04-10</span> <a href="#" title="击餐饮经营难题？云指餐饮小程序打造全新经...">击餐饮经营难题？云指餐饮小程序打造全新经...</a> </li> <li> <span>2018-04-03</span> <a href="#" title="云指佛山50公里徒步公益活动">云指佛山50公里徒步公益活动</a> </li> </ul> <ul> <li> <span>2018-05-23</span> <a href="#" title="DS全球数字峰会：.top域名荣获“20...">DS全球数字峰会：.top域名荣获“20...</a> </li> <li> <span>2018-04-16</span> <a href="#" title="面告诉您如何为您的创业公司选择一个出色的...">面告诉您如何为您的创业公司选择一个出色的...</a> </li> <li> <span>2018-04-10</span> <a href="#" title="使用新的域名尾缀创建有效的品牌微型网站">使用新的域名尾缀创建有效的品牌微型网站</a> </li> <li> <span>2018-04-10</span> <a href="#" title="adix 特别篇：有助于商业上取得成功的...">adix 特别篇：有助于商业上取得成功的...</a> </li> <li> <span>2018-04-03</span> <a href="#" title="爆！单字符域名c.top被区块链终端启用">爆！单字符域名c.top被区块链终端启用</a> </li> </ul> <ul> <li> <span>2018-05-23</span> <a href="#" title="小程序关键词怎么选好？">小程序关键词怎么选好？</a> </li> <li> <span>2018-04-16</span> <a href="#" title="为什么客户要选用云指微信小程序">为什么客户要选用云指微信小程序</a> </li> <li> <span>2018-04-10</span> <a href="#" title="做微信分销商城选择哪个分销系统好">做微信分销商城选择哪个分销系统好</a> </li> <li> <span>2018-04-10</span> <a href="#" title="为什么要用云指H5响应式网站呢？">为什么要用云指H5响应式网站呢？</a> </li> <li> <span>2018-04-03</span> <a href="#" title="微商必看！做好微信分销商城的8个基础">微商必看！做好微信分销商城的8个基础</a> </li> </ul> </div> <div class="information-more"> <a href="#">查看更多</a> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(".information-main-fl").slide({ mainCell: ".bd ul", effect: "leftLoop", autoPlay: true, trigger: "click", mouseOverStop: false });//轮播 jQuery(".information-main-fr").slide({ autoPlay: false, trigger: "mouseover", delayTime: 700, pnLoop: false })//tab切换 </script>
