jquery多功能插件支持无缝图片滚动,选项卡切换,焦点图片切换,点击弹出层等



116 462 155



特效描述: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

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