QQ客服
当前位置 : 上海时时乐开奖彩经 > 代码 > 网页特效 > 图片代码 > 黑色的单排卡片左右滚动代码

上海时时乐开奖走势及时更新: 黑色的单排卡片左右滚动代码

jQuery制作黑色的网站单排图片文字卡片,通过左右箭头按钮控制滚动效果,鼠标悬??ㄆ吡镣怀鱿允?。这是一款图文列表布局代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

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

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入HTML代码

<div class="bodyCon08"><!--学员-->
	<div class="students">
	
		<div id="four_flash">
			<div class="flashBg">
				<ul class="mobile">
					<li>
						<img src="images/senke_xy00.jpg" />
						<dd>高同学</dd>
						<p>2013年CPA暑期班学员,一年通过5门课程</p>
						<a href=""></a>
					</li>
					<li>
						<img src="images/senke_xy01.jpg" />
						<dd>李同学</dd>
						<p>2014年CPA周末旗舰班学员;1年通过4门课程</p>
						<a href=""></a>
					</li>
					<li>
						<img src="images/senke_xy02.jpg" />
						<dd>丁同学</dd>
						<p>现就职某会计师师事务所<br/>2012年CPA学员,3年通过6门课程</p>
						<a href=""></a>
					</li>
					<li>
						<img src="images/senke_xy03.jpg" />
						<dd>宋同学</dd>
						<p>2013年会计证、CPA长线周末班学员,2014年通过4门课程;</p>
						<a href=""></a>
					</li>
					<li>
						<img src="images/senke_xy04.jpg" />
						<dd>战同学</dd>
						<p>2012年北京会计初级金榜,2014年会计中级高分一次通过</p>
						<a href=""></a>
					</li>
					<li>
						<img src="images/senke_xy05.jpg" />
						<dd>于同学</dd>
						<p>2014年会计中级学员,1次性通过中级全科</p>
						<a href=""></a>
					</li>
				</ul>
			</div>
			<div class="but_left"><img src="images/qianxleft.png" /></div>
			<div class="but_right"><img src="images/qianxr.png" /></div>
		</div>
	
	</div>
</div>

<script type="text/javascript">
//学员
var _index5=0;

$("#four_flash .but_right img").click(function(){
	_index5++;
	var len=$(".flashBg ul.mobile li").length;
	if(_index5+5>len){
		$("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
	}
	$("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);
});

$("#four_flash .but_left img").click(function(){
	if(_index5==0){
		$("ul.mobile").prepend($("ul.mobile").html());
		$("ul.mobile").css("left","-1380px");
		_index5=6
	}
	_index5--;
	$("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);
});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 上海时时乐开奖彩经

签到成功!

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

知道了