jquery圖片文字滾動插件多組圖片文字間歇滾動



132 526 176



特效描述:jquery 圖片文字滾動插件 多組圖片文字間歇滾動,jquery圖片文字滾動插件制作多組圖片文字滾動效果,圖片文字上下間歇滾動、左右間歇滾動,可設置多行圖片文字間歇滾動。適用于產品圖片,新聞列表文字間歇滾動展示。

代碼結構

1. 引入JS

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

2. HTML代碼

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋體";}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* demo */
.demo{width:686px;margin:40px auto;position:relative;}
.demo h2{font-size:16px;height:44px;color:#3366cc;margin-top:20px;}
.demo dl dt{font-size:14px;color:#ff6600;margin-top:40px;}
.demo dl dt,.demo dl dd{line-height:22px;}
/* scrollbox */
.scrollbox{position:relative;width:670px;height:146px;overflow:hidden;}
.scrollbox ul{position:absolute;left:0px;top:0px;}
.scrollbox li{float:left;width:670px;height:63px;overflow:hidden;padding:5px 0px;}
.scrollbox li a{float:left;display:inline-block;width:156px;height:63px;overflow:hidden;margin-left:10px;}
.scrollbox li a img{display:block;width:156px;height:63px;background:#eee;}
/* leftlist */
#leftlist{width:999em;}
/* fontlist */
#fontlist li{height:22px;line-height:22px;}
#fontlist li a{width:auto;}
</style>
<div class="demo">	
	<h2>實例1、圖片上下自動間歇滾動</h2>
	<div class="scrollbox">
		<ul id="toplist">
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信國際電器(上海)有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龍盛集團有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="錢江摩托" /></a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信國際電器(上海)有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龍盛集團有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="錢江摩托" /></a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信國際電器(上海)有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龍盛集團有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="錢江摩托" /></a>
			</li>
		</ul>
	</div>
	<h2>實例2、圖片左右自動間歇滾動</h2>
	<div class="scrollbox" style="height:73px;">
		<ul id="leftlist">
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信國際電器(上海)有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龍盛集團有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="錢江摩托" /></a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信國際電器(上海)有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龍盛集團有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="錢江摩托" /></a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151249_pfmei.jpg" alt="三信國際電器(上海)有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151244_u7pjn.jpg" alt="浙江龍盛集團有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151211_keyxb.jpg" alt="浙江市下控股有限公司" /></a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1_20101216151250_0jma3.jpg" alt="錢江摩托" /></a>
			</li>
		</ul>
	</div>
	<h2>實例3、文字上下自動間歇滾動</h2>
	<div class="scrollbox" style="height:64px;width:210px;">
		<ul id="fontlist">
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">三信國際電器(上海)有限公司</a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">三信國際電器(上海)有限公司</a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">三信國際電器(上海)有限公司</a>
			</li>
		</ul>
	</div>
	<dl>
		<dt>應用說明:</dt>
		<dd>* 必須對包裹子元素的直接父元素應用該方法
		<dd>* example: 
<pre>
$("#picturewrap").rollGallery({
	direction:"top",
	speed:2000,
	showNum:4,
	aniMethod:"easeOutCirc"
});
</pre>
		</dd>
		<dd>* direction:移動方向。可取值為:"left" "top"</dd>
		<dd>* speed:速度。單位毫秒</dd>
		<dd>* noStep:設置為:true  則按非步進方式滾動。非步進下動畫效果失效。</dd>
		<dd>* speedPx:非步進滾動下的移動速度。單位像素</dd>
		<dd>* showNum:顯示個數。即父元素能容納的子元素個數</dd>
		<dd>* rollNum:一次滾動的個數。注意總個數必須為rollNum的倍數!</dd>
		<dd>* aniSpeed:動畫速度</dd>
		<dd>* aniMethod:動畫方法(需插件(如:easing)支持)</dd>
		<dd>* childrenSel:子元素篩選器</dd>
	</dl>
</div><!--tabbox end-->
<script type="text/javascript">
$(document).ready(function($){
	$("#toplist").rollGallery({
		direction:"top",
		speed:2000,
		showNum:2
	});
	$("#leftlist").rollGallery({
		direction:"left",
		speed:2000,
		showNum:1
	});
	$("#fontlist").rollGallery({
		direction:"top",
		speed:2000,
		showNum:2
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 文字疊加 文字層疊 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 文字延遲加載 文字延遲 文字加載 文字全屏 文字淡出淡進 文字淡出 文字淡進 文字翻轉 文字旋轉 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字收縮展開 文字收縮 文字展開 文字提示框 提示文字 文字拖動 文字拖拽 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 360全景 360度全景 文字滑動 文字滑塊 文字切換 文字選項卡 自動滾動圖片輪播 文字滾動 文字無縫滾動 文字間歇滾動 圖片文字 文字導航菜單 文字導航 文字菜單 焦點圖 幻燈片 輪播圖 bar焦點圖 文字 文字插件 帶標題的焦點圖 圖片滾動 圖片滾動條 文字滾動 文字無縫滾動 文字間歇滾動 文字列表 圖片文字滾動 文字圖片滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子