jquery图片切换图片与文字切换特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

8 28 10



特效描述:图片与文字切换。jquery图片切换图片与文字切换特效代码下载

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jq.imgTxtCut.js"></script>

3. HTML代码

	<h1>【jquery插件】图文切换效果</h1>
	<div class="table-box">
		<table width="600" border="0" cellspacing="0" cellpadding="0" class="KS-table">
			<tr>
				<td colspan="2">参数:</td>
			</tr>
			<tr>
				<td width="36%">effects</td>
				<td width="64%">flaser效果(默认)<br />“scroll”效果<br />“fade”效果</td>
			</tr>
			<tr>
				<td>speed</td>
				<td>效果执行时间;normal(默认)</td>
			</tr>
		</table>
	</div>
	<hr />
	<h2>图片压扁与文字动画滚动 flaser效果(默认)</h2>
	<pre>$("#img-txt-box1").imgTxtCut({
	speed : 300
	});</pre>
	<div class="img-txt-flaser clearfix" id="img-txt-box1">
		<ul>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.51qianduan.com/"><img src="images/smalld84e378b75983100be152e4d0e4a4b72.jpg" width="150" height="150" alt="jquery图片对联广告制作jQuery侧面浮动图片广告" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
					<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.51qianduan.com/"><img src="images/small76d7b4e9ff38bfd80496f1bae32c71bf.jpg" width="150" height="150" alt="div css3样式表制作css3图片聚光灯特效" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
					<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.51qianduan.com/"><img src="images/small989e3d7a1959211a37c2df254fda6b4d.jpg" width="150" height="150" alt="div+css多张背景图片规范写法图片透明度显示" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
					<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox"><a target="_blank" href="http://www.51qianduan.com/"><img src="images/smallf8852cb544db25262e53339e2ba4b17e.jpg" width="150" height="150" alt="jquery图片切换插件制作左右按钮与标题文字图片切换" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
					<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
				</div>
			</li>
		</ul>
	</div>
	<h2>图片滚动与文字动画滚动 scroll效果(默认)</h2>
	<pre>$("#img-txt-box3").imgTxtCut({
	effects:"scroll",
	speed : 300
	});</pre>
	<div class="img-txt-scrool clearfix" id="img-txt-box3">
		<ul>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动图片放大展示带tab滑动选项卡标签图片滚动" src="images/small0355db342604226d21b883051b8e7c4d.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
						<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery.switchable插件制作选项卡、图片滑动或滚动、手风琴、导航菜单等特效" src="images/small2bdaa0a22ad6928dfba7f626295b54db.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
						<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery选项卡插件制作多种滑动slide选项卡切换和fade选项卡切换等" src="images/smallb85af69ca596ed661928f43fd37070be.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
						<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery导航菜单制作类似选项卡切换的侧边浮动导航条" src="images/smallafa366aba56ec013c824a64753f72f84.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
						<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<h2>图片与文字淡隐淡现 fade效果</h2>
	<pre>$("#img-txt-box2").imgTxtCut({
	effects:"fade",
	speed : 300
	});</pre>
	<div class="img-txt-fade clearfix" id="img-txt-box2">
		<ul>
			<li>
				<div class="imgBox">
					<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash图片特效左右按钮控制图片折叠切换效果" src="images/small9c6f18c61edf1e31839ddf7e4117edef.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
					<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动" src="images/smalld3fe5207f426ffea078c42aff95cfb13.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
					<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash图片特效制作banner焦点图片3D立体展示效果" src="images/small45f9f2a9946aa10fa3fde10eaaef5d1d.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
					<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash特效制作flash图片滚动带按钮控制左右图片滚动" src="images/smallc2c8c7a13e553fa79bedb70c34873a6d.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="https://www.51qianduan.com/" target="_blank">51前端</a></h3>
					<p><a href="https://www.51qianduan.com/" target="_blank">51前端</a></p>
				</div>
			</li>
		</ul>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 图片切换 文字切换 背景切换 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到