jquery banner廣告圖片滾動插件制作圖片與文字無縫滾動 圖片翻滾 焦點圖左右切換



180 719 240



特效描述:jquery banner 圖片滾動 無縫滾動 圖片翻滾 焦點圖左右切換,jquery banner廣告圖片滾動插件,圖片上下滾動、左右滾動、文字上下滾動、左右滾動、圖片無縫滾動、文字無縫滾動、按鈕控制圖片滾動、按鈕控制文字滾動、圖片或文字設置加減速滾動、焦點圖左右切換、banner廣告制作等,kxbdSuperMarquee 是一款多功能滾動插件。

代碼結構

1. 引入JS

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

2. HTML代碼

<div class="demopage">
	<h2>一次橫向滾動一個</h2>
	<div id="marquee1">
		<ul>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 文字滾動大全 scroll 支持文字或圖片 單行滾動 多行滾動 帶按鈕控制滾動"><img width="150" height="150" alt="jquery 文字滾動大全 scroll 支持文字或圖片 單行滾動 多行滾動 帶按鈕控制滾動" src="images/1.jpg" /></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 滾動條 Scrollbar 設置瀏覽器默認滾動條樣式"><img width="150" height="150" alt="jquery 滾動條 Scrollbar 設置瀏覽器默認滾動條樣式" src="images/2.jpg" /></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換"><img width="150" height="150" alt="jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換" src="images/3.jpg" /></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery powerFloat萬能浮動框提示插件 支持圖片、文字、ajax異步加載、表單驗證等"><img width="150" height="150" alt="jquery powerFloat萬能浮動框提示插件 支持圖片、文字、ajax異步加載、表單驗證等" src="images/4.jpg" /></a></li>
		</ul>
	</div>
	<div class="control">↓鼠標點擊:<a href="javascript:void(0);" id="goL">左移一次</a> <a href="javascript:void(0);" id="goR">右移一次</a></div>
	<h2>一次縱向滾動一個</h2>
	<div id="marquee2">
		<ul>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 表單美化 jquery tzCheckbox 復選框美化 自定義默認復選框"><img width="150" height="150" alt="jquery 表單美化 jquery tzCheckbox 復選框美化 自定義默認復選框" src="images/1.jpg" /></a></li>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 圖片放大鏡 圖片類似放大鏡效果鼠標滑過小圖異步加載中圖、大圖"><img width="150" height="150" alt="jquery 圖片放大鏡 圖片類似放大鏡效果鼠標滑過小圖異步加載中圖、大圖" src="images/2.jpg" /></a></li>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 圖片幻燈片 點擊小圖顯示大圖異步加載 支持按鈕播放"><img width="150" height="150" alt="jquery 圖片幻燈片 點擊小圖顯示大圖異步加載 支持按鈕播放" src="images/3.jpg" /></a></li>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery Xslider 插件焦點圖片特效圖片淡隱淡現、圖片上下滾動、圖片左右滾動、選項卡"><img width="150" height="150" alt="jquery Xslider 插件焦點圖片特效圖片淡隱淡現、圖片上下滾動、圖片左右滾動、選項卡" src="images/4.jpg" /></a></li>
		</ul>
	</div>
	<div class="control">↓鼠標點擊:<a href="javascript:void(0);" id="goU">上移一次</a> <a href="javascript:void(0);" id="goD">下移一次</a></div>
	<h2>一次滾動一屏</h2>
	<div class="marqueebox">
		<div id="marquee3">
			<ul>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 文字連續滾動 節奏感十足的齒輪式滾動圖片展示與文字內容特效展示"><img width="620" height="340" alt="jquery 文字連續滾動 節奏感十足的齒輪式滾動圖片展示與文字內容特效展示" src="images/big/1.jpg" /></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效"><img width="620" height="340" alt="jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效" src="images/big/2.jpg" /></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery輕量級進度條 progressbar 帶動畫顯示的進度過程的jquery進度條特效"><img width="620" height="340" alt="jquery輕量級進度條 progressbar 帶動畫顯示的進度過程的jquery進度條特效" src="images/big/3.jpg" /></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery菜單特效 鼠標滑過菜單區域圖標和文本類似flash動畫酷炫移動展示"><img width="620" height="340" alt="jquery菜單特效 鼠標滑過菜單區域圖標和文本類似flash動畫酷炫移動展示" src="images/big/4.jpg" /></a></li>
			</ul>
		</div>
		<div id="mar3Nav"></div>
	</div><!--marqueebox end-->
	<h2>默認不動,可做圖片導航</h2>
	<div id="marquee4">
		<ul>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="javascript jscolor colorpicker js顏色選擇器插件10多種調用顏色方法與取值"><img width="150" height="150" class="pic-04" alt="javascript jscolor colorpicker js顏色選擇器插件10多種調用顏色方法與取值" src="images/1.jpg" /></a></li>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="javascript圖片特效 網站banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動"><img width="150" height="150" class="pic-04" alt="javascript圖片特效 網站banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動" src="images/2.jpg" /></a></li>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="javascript滾動圖片插件支持單排圖片上下滾動、圖片無縫滾動"><img width="150" height="150" class="pic-04" alt="javascript滾動圖片插件支持單排圖片上下滾動、圖片無縫滾動" src="images/3.jpg" /></a></li>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="js多功能選項卡插件 選項卡自動切換內容圖片延遲加載"><img width="150" height="150" class="pic-04" alt="js多功能選項卡插件 選項卡自動切換內容圖片延遲加載" src="images/4.jpg" /></a></li>
		</ul>
	</div>
	<div class="control">↑鼠標點擊:<a href="javascript:void(0);" id="goL2">左移一屏</a> <a href="javascript:void(0);" id="goR2">右移一屏</a></div>
	<h2>間隙上下文字自動滾動 支持左右自動滾動</h2>
	<div id="marquee5">
		<ul>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery colorpicker 插件顏色選擇器 點擊顏色選擇顏色值與顏色相應變化">jquery colorpicker 插件顏色選擇器 點擊顏色選擇顏色值與顏色相應變化</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery評論星星打分特效、鼠標滑過星星顯示評論信息">jquery評論星星打分特效、鼠標滑過星星顯示評論信息</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery圖片切換滾動 水平手風琴切換滾動鼠標滑過圖片水平切換">jquery圖片切換滾動 水平手風琴切換滾動鼠標滑過圖片水平切換</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 圖片切換滾動特效帶分頁索引按鈕控制左右圖片切換滾動">jquery 圖片切換滾動特效帶分頁索引按鈕控制左右圖片切換滾動</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery篩選器插件選項卡 css3制作一個漂亮的HTML5篩選容器插件選項卡">jquery篩選器插件選項卡 css3制作一個漂亮的HTML5篩選容器插件選項卡</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示">jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示</a></li>
		</ul>
	</div>
	<h2>無縫上下文字滾動 支持左右無縫滾動</h2>
	<div id="marquee6">
		<ul>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果">jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="制作CSS3和HTML5的一個單頁網站模板">制作CSS3和HTML5的一個單頁網站模板</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 幻燈片切換應用一個HTML5的幻燈片">jquery 幻燈片切換應用一個HTML5的幻燈片</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 圖片滾動特效應用旋轉幻燈片使用jQuery和CSS3">jquery 圖片滾動特效應用旋轉幻燈片使用jQuery和CSS3</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="用div+css制作純CSS下拉菜單,兼容IE6 IE7 IE8及以上 Firefox">用div+css制作純CSS下拉菜單,兼容IE6 IE7 IE8及以上 Firefox</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
		</ul>
	</div>
	<div class="control">↑鼠標按住:<a href="javascript:void(0);" id="goUM">加速上移</a> <a href="javascript:void(0);" id="goDM">加速下移</a></div>
</div><!--demopage end-->



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片滾動 圖片滾動條 純圖片輪播 圖片輪播 文字滾動 文字無縫滾動 文字間歇滾動 自動滾動圖片輪播 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子