jQuery单屏图文列表滚动布局代码

jQuery客户声音单屏的图片和文字组合滚动切换效果代码。这是一款基于superslide开发的图文列表滚动代码。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/iconfont/iconfont.css" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/jquery.superslide.2.1.1.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="container customer-comment">
	<h2 class="title">客户声音</h2>
	<div class="content w1210">
		<div class="bd">
			<ul class="comment-list">
				<!--兴县在线-->
				<li class="special">
					<div class="customer-logo">
						<a href="#" target="_blank" rel="nofollow"><img src="statics/images/logo1.jpg"></a>
					</div>
					<div class="comment-text">
						<p><i class="iconfont comment-icon-left"></i>之前做电商选择的系统比较难用，给后期的运营带来了一系列的麻烦，那真是操碎了心，所以这次领导要求去各电商软件公司进行实地调研、考察。我们用了半年的时间，先后去了北京、合肥、上海、深圳等地，考察了近20家公司后，确定选择了商之翼的商城系统，选择的理由如下：1、商城系统分两个版本：云端SaaS版和独立部署版。随着公司业务的发展，我们可以升级购买独立部署版，这样我们就不怕公司做大以后命运就不能自己掌控了，这是很多其他软件公司做不到的。2、配套功能完善。做电商平台离不开物流、收银、ERP等系统，商之翼拥有非常全的配套功能模块，其他公司所有这些配套功能都需要做二次开发，做接口对接，还要收取昂贵的开发费用。3、开发团队给力。商之翼开发团队是很有实力的，这也是我们选择商之翼的一个理由。很多小公司开发的系统看着非常具有诱惑力，深入去用，就会发现没有一个功能是做的深入的，又蹩脚又不稳定，再换系统那代价实在是太大了。<i class="iconfont comment-icon-right"></i></p>
					</div>
					<div class="comment-other clearfix">
						<img src="statics/images/case-photo1.jpg" alt="万泰物联">
						<span class="comment-other-line"></span>
						<div class="comment-other-text">
							<h3>刘继伟</h3>
							<p>兴县在线　CEO</p>
						</div>
					</div>
				</li>
				<!--大黄蜂集团-->
				<li>
					<div class="customer-logo">
						<a href="#" target="_blank" rel="nofollow"><img src="statics/images/logo2.jpg"></a>
					</div>
					<div class="comment-text">
						<p><i class="iconfont comment-icon-left"></i>选择商之翼，有以下几个原因：1、商之翼团队站在用户的角度，以用户的视野去优化系统，十年如一坚守工匠精神。2、售后服务周到及时。3、前端布局较为合理，页面美观。所以说商之翼是相当不错的！
							<i class="iconfont comment-icon-right"></i></p>
					</div>
					<div class="comment-other clearfix">
						<img src="statics/images/case-photo2.jpg" alt="大黄蜂集团">
						<span class="comment-other-line"></span>
						<div class="comment-other-text">
							<h3>惠建</h3>
							<p>大黄蜂集团　董事长</p>
						</div>
					</div>
				</li>
				<!--万泰物联-->
				<li class="special">
					<div class="customer-logo">
						<a href="#" target="_blank" rel="nofollow"><img src="statics/images/logo3.jpg"></a>
					</div>
					<div class="comment-text">
						<p><i class="iconfont comment-icon-left"></i>我们在确定要做同城电商平台的时候，开始在全国多家软件开发公司调研。因为自身没有从事过线上平台业务，对系统的要求停留在自己假设的一些功能上面，在实地调研了近十余家软件公司之后，我们选择了秦皇岛商之翼网络科技公司的商城系统，选择的原因包括：1、商城系统根据企业规模划分为两个版本，云端SaaS版、独立部署版。我们可以根据公司实际情况选择相应的版本，随着公司业务的发展，我们可以根据业务需求，升级购买独立部署版，这就避免了自己在做大以后，数据归属权等问题带来的困扰。2、售后服务好。售后服务响应及时，解决问题迅速。3、研发团队厉害。商之翼开发团队是很有实力的，这也是我们选择商之翼的重要原因之一，一些小公司出售的系统虽然看着具有诱惑力，但是没有强有力的技术团队做支撑，市场态势瞬息万变，很多符合市场发展的急需功能，它们是无法快速有效开发的。
							<i class="iconfont comment-icon-right"></i></p>
					</div>
					<div class="comment-other clearfix">
						<img src="statics/images/case-photo3.jpg" alt="万泰物联">
						<span class="comment-other-line"></span>
						<div class="comment-other-text">
							<h3>沈洪光</h3>
							<p>万泰物联　总经理</p>
						</div>
					</div>
				</li>
				<!--创客空间-->
				<li>
					<div class="customer-logo">
						<a href="#" target="_blank" rel="nofollow"><img src="statics/images/logo4.jpg"></a>
					</div>
					<div class="comment-text">
						<p><i class="iconfont comment-icon-left"></i>专业的人做专业的事，商之翼系统安全稳定，售后服务同样很贴心，当下是以质量去生存，以服务求发展的时代，我相信商之翼，同时商之翼用他们的专业服务征服了我，我是创客空间李岩，我为商之翼点赞！
							<i class="iconfont comment-icon-right"></i></p>
					</div>
					<div class="comment-other clearfix">
						<img src="statics/images/case-photo4.jpg" alt="创客空间">
						<span class="comment-other-line"></span>
						<div class="comment-other-text">
							<h3>李岩</h3>
							<p>创客空间　总经理</p>
						</div>
					</div>
				</li>
				<!--维辰科技-->
				<li>
					<div class="customer-logo">
						<a href="#" target="_blank" rel="nofollow"><img src="statics/images/logo5.jpg"></a>
					</div>
					<div class="comment-text">
						<p><i class="iconfont comment-icon-left"></i>我用过很多家公司的系统，之所以选择了商之翼，主要原因有以下几点：1、价格接地气。2、产品功能完善，在行业中可以说是比较好了。3、售后服务做的很好。4、客户反馈的意见可以很快处理。5、功能更新速度快。
							<i class="iconfont comment-icon-right"></i></p>
					</div>
					<div class="comment-other clearfix">
						<img src="statics/images/case-photo5.jpg" alt="维辰科技">
						<span class="comment-other-line"></span>
						<div class="comment-other-text">
							<h3>刘本富</h3>
							<p>维辰科技　总经理</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="hd">
			<a href="javascript:;" class="prev"><i class="iconfont"></i></a>
			<ul>
				<li><span></span></li>
				<li><span></span></li>
				<li><span></span></li>
				<li><span></span></li>
				<li><span></span></li>
			</ul>
			<a href="javascript:;" class="next"><i class="iconfont"></i></a>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(".customer-comment .content").slide({
		titCell: ".hd ul li",
		mainCell: ".bd ul",
		effect: "leftLoop",
		autoPlay: true,
		prevCell: '.prev',
		nextCell: '.next',
		titOnClassName: 'active',
		mouseOverStop: true,
		interTime: 5000
	});
</script>

文件目录

本资源来自：代码 » 图片代码 » jQuery单屏图文列表滚动布局代码

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！