QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jquery新闻资讯动态列表TAB切换代码

原创商用 jquery新闻资讯动态列表TAB切换代码

jquery 电商资讯新闻轮播及新闻动态TAB切换代码布局,jquery实现广告轮播自动滚动以及新闻动态tab切换效果, js css 分离,结构清晰简单,jquery区域均有备注注释,参数均可修改,企业建站常用效果下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
百盈PK10 www.17414.com-中国竞彩网唯唯看球| www.846920.com-3d彩票网站查询| www.947607.com-买彩票的方式有哪些| 500彩票www.570477.com| www.g29.club-南国七星彩彩坛| www.97eb.com-彩金给不给换| www.68860.com-趣彩网骗局揭秘| www.76223.com-温州福利彩票店转让| www.642855.com-汪彩骗人的-| www.446342.com-彩票源码是什么| www.85zf.com-福彩公众号微信投注| www.9891.in-万通彩票娱乐平台| www.260470.com-玩彩赌博-| www.96365.cc-福利彩票常识| www.358318.com-彩票机多少钱| www.501972.com-玩彩票钱全部输光了| www.203379.com-彩票走势图入门| www.718185.com-亿宝彩票-| www.925614.com-去彩票店怎么买彩票| www.247714.com-七天彩是不是坑人的| www.501977.com-十大正规的彩票软件| www.9278.loan-福彩369刮刮乐| www.681557.com-中港彩票网址登录| www.187111.com-重庆时时彩走势图| www.658590.com-范伟买彩票中的号码| 华夏彩票www.hx5566.com| www.240.tv-高频彩票返奖| www.809891.com-七乐彩3d太湖| www.133477.com-福彩3d双福彩票网| www.382825.com-穿越成九彩僵神| www.83cf.com-彩印产品-| www.3456.me-懂彩宝首页-| www.089437.com-乐彩网走势图专业版| www.162111.cc-汇彩网能赚钱么| www.230178.com-福利彩8靠谱吗| www.310088.com-延吉市体育彩票站| www.41035.cc-稳氏彩票-| www.018039.com-七乐彩走势图综合版| www.543908.cc-万博博彩可靠吗| www.637368.com-彩虹5多少钱| www.731058.com-足球彩票盈亏技巧| www.804905.com-同志彩虹旗高清壁纸| www.885307.com-彩票计划吧-| www.973194.com-彩虹正版源码| www.ac9.com-今日贵州快三出奖号| www.pj02.cc-下载五百万彩票| www.02vc.com-彩虹什么意思| www.85qx.com-彩票店不能过户| www.3443.cm-网易彩票—彩种| www.9226.top-航天十一院彩虹公司| www.331716.com-乐彩网的网址是多少| www.448051.com-足彩第19026期| www.532827.com-彩吧首页首页| www.5048.cm-江苏体彩一选五| www.11558.cc-羊城晚报晚晚好彩| www.63721.cc-天价彩礼-| www.023915.com-私彩网站怎么盈利| www.099048.com-五福彩票专业版苹果| www.169770.com-湖北快三-| www.457065.com-彩票正能量的句子| www.545828.com-彩票平台和计划员| www.608229.com-美国彩票即时开奖吗| www.531298.com-快三倍投8倍是多少| www.5928.cm-亿彩彩票靠谱吗| www.20095.com-今日福利彩票双色球| www.78318.com-彩票站有新人红包的| www.030000.com-五洲彩票靠谱吗| www.65sc.com-网赌彩票心得体会| www.277348.com-彩票平台破解器| www.129754.com-彩票守号中一等奖| www.170141.com-江西快三常规走势图| www.464966.com-分分快三每分钟一开| www.671491.com-重庆时时采彩开奖表| www.871934.com-彩王缩水软件手机版| www.07rd.com-刚力彩芽长发| www.721005.com-彩票2元3d走势图| www.877792.com-我想做网络私彩代理| 博友彩www.832793.com| www.96xo.com-休彩排到三走势图| www.7248.xyz-彩虹六号无人机dr| www.104822.com-天下彩票计划| www.971294.com-快三最新玩法| www.es59.com-分分中彩票手机版| www.200.cn-动物彩铅画简单| www.361005.com-长春高新区彩票站| www.682990.com-彩票第一门户app| www.773020.com-手机彩票e乐彩| www.860280.com-快彩网骗局揭秘| www.925695.com-彩票保本投注法| www.993320.com-足彩任选9规律| www.hl17.com-今日福彩3d字画| www.299253.com-体彩中心电话号码| www.588067.com-玩时时彩输了好多钱| www.038886.com-赢彩网江苏快三计划| www.171067.com-河北快三实时开奖| www.333264.com-中福快三和值走势图| www.663600.cc-七乐彩开奖单式结果| www.762108.com-竞彩足球手机客户端| www.266941.com-福彩快三和值奖金| www.184254.com-手机快三输钱是骗局| www.3060.in-微彩吧是骗子吗| www.922253.com-365彩票怎么样| www.329172.com-118彩票下载安装| www.852691.com-多彩宝-| www.rc73.com-休彩-| www.5355.cc-为什么很多人买彩票| 大赢家彩票平台www.183587.com| 500彩票www.396477.com| 5号彩www.585hc.com| www.qs49.com-体彩的宗旨-| www.18oi.com-什么的彩虹填空| www.411.name-福彩事件结果| www.252932.com-500彩票大发快三| www.420900.com-西湾娱乐娱城时时彩| www.865821.com-熊猫彩票平台合法吗| www.7722.cm-玩大发快三软件下载| www.63731.cc-竞彩足球投注量| www.083361.com-福彩动物总动员| www.726119.com-七乐i彩开将| www.669603.com-福彩体彩都有什么| www.761229.com-阳光彩票是骗人的吗| www.27il.com-彩票中奖方法传奇| www.4437.cc-分分彩后三稳赢技巧| www.35559.cc-永利彩票是骗局吗| www.330521.com-伦敦2分彩走势图| www.794809.com-秒速时时彩开挂软件| www.836356.com-雄鹿快三计划软件| www.8526.org-福彩游戏机怎么回事| www.158358.com-竞彩噢澳客-| www.1189.org-河北快三对子分析| www.kr87.com-湖北快三遗漏值统计| www.326326.com-彩宝l输了好几万| www.v41.com-福彩专家导航| www.81781.com-甘肃私彩赌博| www.69955.cc-哪个快三平台正规| www.835991.com-中国福利彩票好彩2| www.23781.cc-彩票走势分析软件| www.62ml.com-乐彩网排三技巧| www.843103.com-彩票站点缴纳社保| www.909226.com-宝马彩票网-| www.958084.com-新乐彩11选5开奖| 大赢家彩票平台www.186297.com| www.ed75.com-快三怎么返点| www.936511.com-彩票淘宝-| www.445933.com-彩票提现被风控| www.867611.com-廉江七星彩高手论坛| www.972237.com-菲律宾一分彩走势图| www.t56.cn-够彩大厅网址| www.721936.com-中国福彩网官网首页| www.805915.com-江苏体彩排列三| www.871990.com-3福彩开机号| www.928767.com-排列5和七星彩奖表| www.971636.com-湖北拼搏在线彩票网| 购彩在线www.66332w.com| www.ax86.com-7乐彩专家预测| www.no51.com-彩票做号器-| www.j35.cc-汉口福彩兑奖中心| www.29yy.com-用彩铅画眼睛| www.155227.com-希腊十分彩开奖号码| www.36005.cc-彩票iphone-| www.579016.com-甘肃省体彩领奖| www.355639.com-福彩双胆-| www.916831.com-老9购彩票-| 福运www.fyyy4.com|