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天

知道了