jquery多功能插件支持無縫圖片滾動,選項卡切換,焦點圖片切換,點擊彈出層等



120 479 160



特效描述:jquery多功能插件 支持無縫圖片滾動 選項卡切換 焦點圖片切換 點擊彈出層,選項卡 滾動 浮動層 圖片效果 幻燈片 多種效果集合jquery插件,調用簡單,滾動可滾動圖片和文字,選項卡有延遲效果,傳入參數就能用非常簡單。jquery模擬滾動條美化。

代碼結構

1. 引入JS

<script src="javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="javascript/MyCxcPlug.js" type="text/javascript"></script>

2. HTML代碼

<div class="scroll" id="scroll">
	<div class="sc_left" id="scroll_bd">
		<div class="scr_cont"  id="scroll_bd1">
			<h1>滾動實例(可文字滾動)</h1>
			<div class="main">
				<!--無縫滾動上下-->
				<div id="LessTop" class="top">
					<ul id="LessTop1" class="top1">
						<li><img src="images/cs01.jpg" /></li>
						<li><img src="images/cs02.jpg" /></li>
						<li><img src="images/cs03.jpg" /></li>
						<li><img src="images/cs04.jpg" /></li>
						<li><img src="images/cs05.jpg" /></li>
						<li><img src="images/cs06.jpg" /></li>
					</ul>
					<ul id="LessTop2" class="top2"></ul>
				</div>
				<div id="LessDown" class="top">
					<ul id="LessDown1" class="top1">
						<li><img src="images/cs01.jpg" /></li>
						<li><img src="images/cs02.jpg" /></li>
						<li><img src="images/cs03.jpg" /></li>
						<li><img src="images/cs04.jpg" /></li>
						<li><img src="images/cs05.jpg" /></li>
						<li><img src="images/cs06.jpg" /></li>
					</ul>
					<ul id="LessDown2" class="top2"></ul>
				</div>
				<!--像素滑動上下-->
				<div id="top" class="top">
					<ul id="top1" class="top1">
						<li><img src="images/cs01.jpg" /></li>
						<li><img src="images/cs02.jpg" /></li>
						<li><img src="images/cs03.jpg" /></li>
						<li><img src="images/cs04.jpg" /></li>
						<li><img src="images/cs05.jpg" /></li>
						<li><img src="images/cs06.jpg" /></li>
					</ul>
					<ul id="top2" class="top2"></ul>
				</div>
				<div id="down" class="top">
					<ul id="down1" class="top1">
						<li><img src="images/cs01.jpg" /></li>
						<li><img src="images/cs02.jpg" /></li>
						<li><img src="images/cs03.jpg" /></li>
						<li><img src="images/cs04.jpg" /></li>
						<li><img src="images/cs05.jpg" /></li>
						<li><img src="images/cs06.jpg" /></li>
					</ul>
					<ul id="down2" class="top2"></ul>
				</div>
				<script type="text/javascript">
				$(document).ready(function(){
					//無縫滑動
					PixelScroll({
						Id:"top",//第一個ID
						IdOne:"top1",//第二個ID
						IdTwo:"top2",//第三個ID
						Space:158,//每次滾動像素
						Direction:"top",//滾動方向
						Speed:2000//滾動速度
					});
					PixelScroll({
						Id:"down",//第一個ID
						IdOne:"down1",//第二個ID
						IdTwo:"down2",//第三個ID
						Space:79,//每次滾動像素
						Direction:"down",//滾動方向
						Speed:2000//滾動速度
					});
					PixelScroll({
						Id:"left",//第一個ID
						IdOne:"left1",//第二個ID
						IdTwo:"left2",//第三個ID
						Space:243,//每次滾動像素
						Direction:"left",//滾動方向
						Speed:2000//滾動速度
					});
					PixelScroll({
						Id:"right",//第一個ID
						IdOne:"right1",//第二個ID
						IdTwo:"right2",//第三個ID
						Space:243,//每次滾動像素
						Direction:"right",//滾動方向
						Speed:2000//滾動速度
					});
				});
				</script>
			</div>
			<!--像素滑動左右-->
			<div id="left" class="left">
				<div style="width:1500%;">
					<ul id="left1" class="left1">
						<li><img src="images/cs01.jpg" /></li>
						<li><img src="images/cs02.jpg" /></li>
						<li><img src="images/cs03.jpg" /></li>
						<li><img src="images/cs04.jpg" /></li>
						<li><img src="images/cs05.jpg" /></li>
						<li><img src="images/cs06.jpg" /></li>
					</ul>
					<ul id="left2" class="left2"></ul>
				</div>
			</div>
			<div id="right" class="left">
				<div style="width:1500%;">
					<ul id="right1" class="left1">
						<li><img src="images/cs01.jpg" /></li>
						<li><img src="images/cs02.jpg" /></li>
						<li><img src="images/cs03.jpg" /></li>
						<li><img src="images/cs04.jpg" /></li>
						<li><img src="images/cs05.jpg" /></li>
						<li><img src="images/cs06.jpg" /></li>
					</ul>
					<ul id="right2" class="left2"></ul>
				</div>
			</div>
			<!--無縫滾動左右-->
			<div id="LessLeft" class="left">
				<div style="width:1500%;">
					<ul id="LessLeft1" class="left1">
						<li><img src="images/cs01.jpg" /></li>
						<li><img src="images/cs02.jpg" /></li>
						<li><img src="images/cs03.jpg" /></li>
						<li><img src="images/cs04.jpg" /></li>
						<li><img src="images/cs05.jpg" /></li>
						<li><img src="images/cs06.jpg" /></li>
					</ul>
					<ul id="LessLeft2" class="left2"></ul>
				</div>
			</div>
			<div id="LessRight" class="left">
				<div style="width:1500%;">
					<ul id="LessRight1" class="left1">
						<li><img src="images/cs01.jpg" /></li>
						<li><img src="images/cs02.jpg" /></li>
						<li><img src="images/cs03.jpg" /></li>
						<li><img src="images/cs04.jpg" /></li>
						<li><img src="images/cs05.jpg" /></li>
						<li><img src="images/cs06.jpg" /></li>
					</ul>
					<ul id="LessRight2" class="left2"></ul>
				</div>
			</div>
			<script type="text/javascript">
			$(document).ready(function(){
				//無縫滾動
				SeamLessScroll({
					Id:"LessTop",//第一個ID
					IdOne:"LessTop1",//第二個ID
					IdTwo:"LessTop2",//第三個ID
					Direction:"top",//滾動方向
					Speed:50//滾動速度
				});
				SeamLessScroll({
					Id:"LessDown",//第一個ID
					IdOne:"LessDown1",//第二個ID
					IdTwo:"LessDown2",//第三個ID
					Direction:"down",//滾動方向
					Speed:50//滾動速度
				});
				SeamLessScroll({
					Id:"LessLeft",//第一個ID
					IdOne:"LessLeft1",//第二個ID
					IdTwo:"LessLeft2",//第三個ID
					Direction:"left",//滾動方向
					Speed:50//滾動速度
				});
				SeamLessScroll({
					Id:"LessRight",//第一個ID
					IdOne:"LessRight1",//第二個ID
					IdTwo:"LessRight2",//第三個ID
					Direction:"right",//滾動方向
					Speed:50//滾動速度
				});
			});
			</script>
			<h1>自動選項卡(可以延遲加載選項卡)</h1>
			<div class="Table">
				<div id="Tab_Auto" class="Tab_Auto">
					<ul class="tab" id="Tab">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					<p class="tab_lst" id="Tab_Content0">內容1</p>
					<p class="tab_lst disp" id="Tab_Content1">內容2</p>
					<p class="tab_lst disp" id="Tab_Content2">內容3</p>
					<p class="tab_lst disp" id="Tab_Content3">內容4</p>
				</div>
				<div id="Tab_No" class="Tab_Auto">
					<ul class="tab" id="Table">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					<p class="tab_lst" id="Table_Content0">內容1</p>
					<p class="tab_lst disp" id="Table_Content1">內容2</p>
					<p class="tab_lst disp" id="Table_Content2">內容3</p>
					<p class="tab_lst disp" id="Table_Content3">內容4</p>
				</div>
				<script type="text/javascript">
				$(document).ready(function(){
					MyTab({
						Content:"Tab_Auto",//盒子ID
						LstId:"Tab",//列表ID
						Active:"active",//選中樣式
						Normal:"normal",//沒有選中樣式
						Default:0,//默認選中
						Activation:"click",//click或者hover
						Automatic:true,//是否自動播放
						Speed:2000,//播放延遲
						Delay:0//執行延遲
					});
					MyTab({
						Content:"Tab_No",//盒子ID
						LstId:"Table",//列表ID
						Active:"active",//選中樣式
						Normal:"normal",//沒有選中樣式
						Default:0,//默認選中
						Activation:"hover",//click或者hover
						Automatic:false,//是否自動播放
						Speed:2000,//播放延遲
						Delay:500//執行延遲
					});
				});
				</script>
			</div>
			<h1>淡入淡出切換</h1>
			<div class="switch" id="Switch">
				<img src="images/cs01.jpg" />
				<img src="images/cs02.jpg" />
				<img src="images/cs03.jpg" />
			</div>
			<script type="text/javascript">
			$(document).ready(function(){
				ImgSwitch({
					Id:"Switch",//主ID
					Element:"img",//執行切換元素
					Speed:5000//每個幾秒執行
				});
			});
			</script>
			<h1>幻燈片</h1>
			<div class="Warp" id="Warp">
				<ul id="pic">
					<li><a target="_blank" href=""><img src="images/1.jpg"></a></li>
					<li><a target="_blank" href=""><img src="images/2.jpg"></a></li>
					<li><a target="_blank" href=""><img src="images/3.jpg"></a></li>
					<li><a target="_blank" href=""><img src="images/4.jpg"></a></li>
					<li><a target="_blank" href=""><img src="images/5.jpg"></a></li>
				</ul>
			</div>
			<script type="text/javascript">
			$(document).ready(function(){
				CxcFocus({
					Id:"Warp",//主ID
					Time:3000//每個幾秒執行
				});
			});
			</script>
			<h1>彈出層</h1>
			<p class="Monv">單擊彈出層</p>
			<div id="Monver"><span id="close"><img src="images/ImgClose.png" /></span></div>
			<div id="cxc"></div>
			<script type="text/javascript">
			$(document).ready(function(){
				$(".Monv").click(function(){
					Popuplayer({
						LayerId:"Monver",//層ID
						Masklayer:"cxc",//遮罩層ID
						CloseID:"close",//退出id
						Fun:function(){} //關閉時是否回調函數
					});
				});
			});
			</script>
			<div style="height:100px;"></div>
		</div>
	</div><!--sc_left end-->
	<div class="sc_right">
		<div class="sc_right1" id="scroll_ri">
			<p id="scroll_ri1"></p>
		</div>   
	</div><!--sc_right end-->
</div>
<script type="text/javascript">
$(document).ready(function(){
	PalyScroll({
		ScrollContent:"scroll",//滾動最大內容id
		ContentOneId:"scroll_bd",//內容外層id
		ContentTwoId:"scroll_bd1",//內容id
		ScrollOneId:"scroll_ri",//滾動條外層id
		ScrollTwoId:"scroll_ri1"//滾動條id
	});
});
</script>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 彈出層拖動 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 圖片滾動 圖片滾動條 提示框/彈出層 文字滾動 文字無縫滾動 文字間歇滾動 文字切換 文字選項卡 圖片文字滾動 文字圖片滾動 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子