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



154 613 205



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



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


热门标签: 滚动导航菜单 导航切换 右键菜单 滚动切换 文字提示框 图片滚动 图片切换 提示框/弹出层 文字滚动 文字切换 layer 背景切换 lightbox 图片文字滚动 手风琴 全屏滚动 Tooltip工具提示框 选项卡自动切换 浮动提示框 页面滚动 视频切换 html5弹窗动画 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动流动 滚动切换 滑动选项卡切换 自动滚动图片轮播 弹出层拖动 选项卡切换 滑动手风琴 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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