jquery slide焦点图片轮播滚动特效代码下载



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

29 113 38



特效描述:焦点图片 轮播滚动。jquery slide焦点图片轮播滚动特效代码下载

代码结构

1. 引入JS

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

2. HTML代码

	<div id="page">
		<table width="760" border="0" cellspacing="0" cellpadding="0" class="KS-table">
			<caption>JQ-Slide插件参数说明表</caption>
			<tr>
				<th width="155" scope="row">参数名</th>
				<td width="438">参数值(默认值可以省略)</td>
				<td width="166">&nbsp;</td>
			</tr>
			<tr>
				<th rowspan="5" scope="row">effect </th>
				<td>scroolY(默认):垂直滚动</td>
				<td rowspan="5">&nbsp;</td>
			</tr>
			<tr>
				<td>scroolX:水平滚动</td>
			</tr>
			<tr>
				<td>scroolTxt:文本垂直滚动</td>
			</tr>
			<tr>
				<td>fade:淡出</td>
			</tr>
			<tr>
				<td>scroolLoop:水平左右点击滚动</td>
			</tr>
			<tr>
				<th scope="row">autoPlay</th>
				<td>true(默认): or false</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">speed</th>
				<td>动画速度时间,默认&quot;normal&quot;,可以使用毫秒或者JQ中的fast,slow,normal</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">timer</th>
				<td>滚动间隔时间,默认&quot;1000,可以使用毫秒或者JQ中的fast,slow,normal</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">claNav</th>
				<td>JQ-slide-nav(默认):触点对象数组父级</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">claCon</th>
				<td>JQ-slide-content(默认):滚动对象或滚动对象父级</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">steps</th>
				<td>1(默认):滚动几个</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		<br />
		<hr />
		<br />
		<h3>滚动一:</h3>
		<div id="temp1">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad1.jpg" width="549" /></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad2.jpg" width="549"></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad3.jpg" width="549"></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad4.jpg" width="549"></a></li>
				</ul>
			</div>
			<ul class="JQ-slide-nav">
				<li class="on"><a href="#" class="next"><img src="images/guangg1.jpg"></a></li>
				<li><a href="#"><img src="images/guangg2.jpg"></a></li>
				<li><a href="#"><img src="images/guangg3.jpg"></a></li>
				<li><a href="#"><img src="images/guangg4.jpg"></a></li>
			</ul>
		</div><!--temp1 end-->
<pre>
$("#temp1").Slide({
	effect : "scroolY",
	speed : "normal",
	timer : 3000
});
</pre>
		<hr />
		<h3>滚动二:</h3>
		<div id="temp2">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad1.jpg" width="549" /></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad2.jpg" width="549"></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad3.jpg" width="549"></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad4.jpg" width="549"></a></li>
				</ul>
			</div>
			<ul class="JQ-slide-nav">
				<li class="on"><a href="#"><img src="images/guangg1.jpg"></a></li>
				<li><a href="#"><img src="images/guangg2.jpg"></a></li>
				<li><a href="#"><img src="images/guangg3.jpg"></a></li>
				<li><a href="#"><img src="images/guangg4.jpg"></a></li>
			</ul>
		</div><!--temp2 end-->
<pre>
$("#temp2").Slide({
	effect : "scroolX",
	speed : "normal",
	timer : 3000
});
</pre>
		<hr />
		<h3>滚动三:</h3>
		<div id="temp3">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad1.jpg" width="549" /></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad2.jpg" width="549"></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad3.jpg" width="549"></a></li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="289" src="images/ad4.jpg" width="549"></a></li>
				</ul>
			</div>
			<ul class="JQ-slide-nav">
				<li class="on"><a href="#"><img src="images/guangg1.jpg"></a></li>
				<li><a href="#"><img src="images/guangg2.jpg"></a></li>
				<li><a href="#"><img src="images/guangg3.jpg"></a></li>
				<li><a href="#"><img src="images/guangg4.jpg"></a></li>
			</ul>
		</div><!--temp3 end-->
<pre>
$("#temp3").Slide({
	effect : "fade",
	speed : "normal",
	timer : 3000
});
</pre>
		<hr />
		<h3>滚动四:</h3>
		<div id="slide-box">
			<b class="corner"></b>
			<div class="slide-content" id="temp4">
				<div class="wrap">
					<ul class="JQ-slide-content">
						<li><a href="http://www.51qianduan.com" target="_blank"><IMG src="images/01.jpg" alt="懒人图库" width="330" height="450" /></a></li>
						<li><a href="http://www.51qianduan.com" target="_blank"><IMG alt="懒人图库" src="images/02.jpg" width="330" height="450" /></a></li>
						<li><a href="http://www.51qianduan.com" target="_blank"><IMG alt="懒人图库" src="images/03.jpg" width="330" height="450" /></a></li>
						<li><a href="http://www.51qianduan.com" target="_blank"><IMG alt="懒人图库" src="images/04.jpg" width="330" height="450" /></a></li>
						<li><a href="http://www.51qianduan.com" target="_blank"><IMG alt="懒人图库" src="images/05.jpg" width="330" height="450" /></a></li>
						<li><a href="http://www.51qianduan.com" target="_blank"><IMG alt="懒人图库" src="images/06.jpg" width="330" height="450" /></a></li>
					</ul>
				</div>
				<div class="JQ-slide-nav">
					<a class="prev" href="#">
						<b class="corner"></b>
						<span>&#8249;</span>
						<B class="corner"></B>
					</a>
					<a class="next" href="#">
						<b class="corner"></b>
						<span>&#8250;</span>
						<B class="corner"></B>
					</a>
				</div>
			</div>
			<b class="corner"></b>
		</div><!--slide-box end-->
<pre>
$("#temp4").Slide({
	effect : "scroolLoop",
	autoPlay:false,
	speed : "normal",
	timer : 3000,
	steps:2
});
</pre>
		<hr />
		<h3>滚动五:</h3>
		<div id="temp5">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li>这是公告标题的第一行</li>
					<li>这是公告标题的第二行</li>
					<li>这是公告标题的第三行</li>
					<li>这是公告标题的第四行</li>
					<li>这是公告标题的第五行</li>
					<li>这是公告标题的第六行</li>
					<li>这是公告标题的第七行</li>
					<li>这是公告标题的第八行</li>
					<li>这是公告标题的第9行</li>
					<li>这是公告标题的第10行</li>
					<li>这是公告标题的第11行</li>
					<li>这是公告标题的第12行</li>
				</ul>
			</div>
		</div><!--temp5 end-->
<pre>
$("#temp5").Slide({
	effect : "scroolTxt",
	speed : "normal",
	timer : 3000,
	steps:1
});
</pre>
		<hr />
		<h3>滚动六:</h3>
		<div id="temp6">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="144" alt="" title="" src="images/g5.jpg" width="710" /></a> </li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="144" alt="" title="" src="images/20100820-284f62ce01db688e.jpg" width="710" /></a> </li>
					<li><a href="http://www.51qianduan.com" target="_blank"><img height="144" alt="" title="" src="images/g1.jpg" width="710" /></a> </li>
				</ul>
				<ul class="JQ-slide-nav">
					<li class="on">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</div>
		</div><!--temp6 end-->
<pre>
$("#temp6").Slide({
	effect : "scroolY",
	speed : "normal",
	timer : 3000
});
</pre>
	</div>



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


热门标签: 滚动导航菜单 带标题的焦点图 滚动切换 带缩略图的幻灯片 带简介的焦点图 图片滚动 图片轮播 文字滚动 自动滚动图片轮播 图片文字滚动 马赛克幻灯片 全屏滚动 全屏焦点图 页面滚动 滚动流动 flash焦点图 自动滚动图片轮播 焦点图幻灯片

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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