经验分享程序开发文档资料数据资源其它资源

正益无线首页jQuery焦点图轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 正益无线首页jQuery焦点图轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

正益无线首页jQuery焦点图轮播滚动切换特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>正益无线首页jQuery焦点图</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/banner.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/switch.js"></script>  
</head> 
<body>
<div id="slideBox" class="slideBox">
	<div class="hd">
		<ul><li></li><li></li><li></li></ul>
	</div>
	<div class="bd">
		<ul>
			<li style="background: url(images/banner2_1.jpg) 50% 0px no-repeat;">
				<div id="a3"></div>
				<div id="a4"></div>
				<div id="a5"></div>
			</li>
			<li style="background: url(images/banner4.png) 50% 0px no-repeat;">
				<div id="a12"></div>
					<div id="a11"></div>
			</li>
			<li class="banner1">
				<a href="#" target="_blank" class="content1">
					<div id="a20"></div>
						<div class="b2_word">
							<var id="a21">为</var><span id="a23"></span><var id="a22">而生</var>
						</div>
					<div id="a24">AppCan引领企业进入移动管理新时代</div>
				</a>
			</li>
		</ul>    
	</div>
</div>

<script src="js/jquery.SuperSlide.2.1.1.js"></script> 
<script type="text/javascript">
// 轮播
$(".slideBox").slide({mainCell:".bd ul",effect:"leftLoop",autoPlay:true,
	startFun:function(i,c){
	del();
	switch(i){
				case 0:
						$("#a3").addClass('animation3');
						$("#a4").addClass('animation4');
						$("#a5").addClass('animation5');
						break;
				case 1:
						$("#a11").addClass('animation8');
						$("#a12").addClass('animation9');

						break;
				// case 2:
						// $("#a8").addClass('animation6');
						// $("#a9").addClass('animation7');
						// $("#a10").addClass('animation7');
						// break;
				case 2:
			 
					   $(".content1 #a20").addClass('animation20');
						$(".b2_word #a21").addClass('animation21');
						$(".b2_word #a22").addClass('animation21');
						$(".b2_word #a23").addClass('animation20');
						$(".content1 #a24").addClass('animation22');
						break;
				default:break;
			}
	}
});
</script>
</body>
</html>

JS代码(switch.js):

(function(){
	window.Dom=Dom={
	addEvent:function(s,fn){
	this.attachEvent?this.attachEvent('on'+s,fn):this.addEventListener(s,fn,false);
	return this;
}
,//添加事件[事件(要去掉前面的on),方法]delEvent:function(s,fn){
	this.detachEvent?this.detachEvent('on'+s,fn):this.removeEventListener(s,fn,false);
	return this;
}
,//删除事件[事件(要去掉前面的on),方法]addDom:function(node,tag,first){
	var o=node.createElement(tag);
	first?node.insertBefore(o,node.firstChild):node.appendChild(o);
	return o;
}
,//创建子节点[节点，要创建的TAG，插入位置]delDom:function(node,obj){
	node.removeChild(obj);
}
,//删除子节点[父节点，要删除节点]addImg:function(url){
	var img=new Image();
	img.src=url;
	return img;
}
,//创建缓存图片[图片地址]winh:function(){
	return Math.min(document.documentElement.clientHeight,document.body.clientHeight);
}
,//返回浏览器可用高mouseX:function(event){
	return (event.pageX || (event.clientX +l(document)));
}
,//返回鼠标的X座标mouseY:function(event){
	return (event.pageY || (event.clientY +t(document)));
}
//返回鼠标的Y座标}
Fun.xcopy(Dom,Element);
}
)();
	window.Effect={
	//滚动/切屏效果，[id,子容器/孙容器,方向,速度,上按钮,下按钮,分页切换时间,每次切屏的条数]HtmlMove:function(id,tag,path,rate,upbt,downbt,pgtime,lis){
	var c,mous=false,fg=tag.split('/'),o=$(id),as=o.find(fg[1]),fx=(path=="scrollRight"||path=="scrollLeft")?"scrollLeft":"scrollTop",ow=fx=="scrollTop"?as[0].h():as[0].w();
	o.onmouseover=function(){
	mous=true;
}
;
	o.onmouseout=function(){
	mous=false;
}
if(pgtime==null){
	var mx=ow*as.length,mi=0,oldra=rate,os=o.find(fg[0])[0];
	os.innerHTML+=os.innerHTML;
	if(upbt){
	$(upbt).onmousedown=function(){
	down();
	rate+=3;
}
;
	$(upbt).onmouseup=function(){
	rate=oldra;
}
;
}
if(downbt){
	$(downbt).onmousedown=function(){
	up();
	rate+=3;
}
;
	$(downbt).onmouseup=function(){
	rate=oldra;
}
;
}
function up(){
	clearInterval(c);
	c=setInterval(function(){
	if(mous){
	return;
}
(o[fx]-rate>0)?(o[fx]-=rate):(o[fx]=mx);
}
,30);
}
function down(){
	clearInterval(c);
	c=setInterval(function(){
	if(mous){
	return;
}
(o[fx]+rate<mx)?(o[fx]+=rate):(o[fx]=0);
}
,30);
}
if(path=="scrollTop"||path=="scrollLeft"){
	down();
}
else{
	up();
}
}
else{
	var pw=fx=="scrollTop"?o.h():o.w(),pgli=lis||Math.floor((pw+ow/2)/ow),pg=Math.floor((as.length+(pgli-1))/pgli),pgmx=ow*pgli,now=0,mx,d;
	var os=o.find(fg[0])[0];
	os.innerHTML+=os.innerHTML;
	d=setInterval(function(){
	go_to((path=="scrollTop"||path=="scrollLeft")?true:false);
}
,pgtime);
	if(upbt){
	$(upbt).onmousedown=function(){
	clearInterval(d);
	go_to(true);
	d=setInterval(function(){
	go_to(true);
}
,pgtime);
}
}
if(downbt){
	$(downbt).onmousedown=function(){
	clearInterval(d);
	go_to(false);
	d=setInterval(function(){
	go_to(false);
}
,pgtime);
}
}
if(fg[2]){
	var pf=o.find(fg[2])[0];
}
;
	function pfs(vs){
	if(fg[2]){
	pf.style.display="block";
	pf.style.left=vs+"px";
}
}
;
	function pfscl(){
	if(fg[2]){
	pf.style.display="none";
}
}
function go_to(fxs){
	if(mous){
	return;
}
;
	var ex;
	if(fxs){
	if(now<pg){
	now++;
}
else{
	now=1;
	o[fx]=0;
}
pfs((now-1)*pgmx);
	mx=now*pgmx;
	ex=setInterval(function(){
	(o[fx]+rate<mx)?(o[fx]+=rate):o[fx]=mx;
	if(o[fx]==mx){
	clearInterval(ex);
	ex=null;
	pfscl();
}
}
,5);
}
else{
	if(now>0){
	now--;
}
else{
	now=pg-1;
	o[fx]=pg*pgmx;
}
pfs((now+1)*pgmx);
	mx=now*pgmx;
	ex=setInterval(function(){
	(o[fx]-rate>mx)?(o[fx]-=rate):o[fx]=mx;
	if(o[fx]==mx){
	clearInterval(ex);
	ex=null;
	pfscl();
}
}
,5);
}
}
}
}
,//缓冲：id，要设置的图片ID，节点移动速度，要移动到的目的支持：['width:100','height:100','left:100','top:100','opacity:100','scrollTop:100','scrollLeft:100']，移动完成后回调方法名不支持参数，可选//如果事件中有opacity属性：则页面样式中要定义：opacity:0.1;
	filter:alpha(opacity=10);
	SpaceTo:function(id,slot,mx,fun){
	var o=$(id),over=0,ar=Array(),len=mx.length,temp;
	for(var i=0;
	i<len;
	i++){
	ar[i]=mx[i].split(":");
	ar[i]=ar[i].concat(li(ar[i][0]));
	ar[i][1]=parseInt(ar[i][1]);
	ar[i][1]>ar[i][2]&&(ar[i][1]+=(slot-1));
	ar[i][5]=true;
}
clearInterval(window[id+"spaceTo"]);
	window[id+"spaceTo"]=setInterval(mov,10);
	function mov(){
	for(var i=0;
	i<len;
	i++){
	if(ar[i][5]){
	ar[i][2]+=(temp=Math.floor((ar[i][1]-ar[i][2])/slot));
	ar[i][3][ar[i][0]]=ar[i][0]=='opacity' && !(/*@cc_on!@*/
false)?ar[i][2]*0.01:ar[i][2]+ar[i][4];
	if(temp==0){
	ar[i][5]=false;
	over++;
}
}
}
if(over==len){
	clearInterval(window[id+"spaceTo"]);
	if(fun){
	fun();
}
}
}
}
}
function del(){
	$("#a3").removeClass('animation3');
	$("#a4").removeClass('animation4');
	$("#a5").removeClass('animation5');
	$("#a8").removeClass('animation6');
	$("#a9").removeClass('animation7');
	$("#a10").removeClass('animation7');
	$("#a11").removeClass('animation8');
	$("#a12").removeClass('animation9');
	$(".content1 #a20").removeClass('animation20');
	$(".b2_word #a21").removeClass('animation21');
	$(".b2_word #a22").removeClass('animation21');
	$(".b2_word #a23").removeClass('animation20');
	$(".content1 #a24").removeClass('animation22');
}

CSS代码(banner.css):

@charset "utf-8";/* CSS Document */
body,nav,span,p,var,em,strong,a,h1,h2,h3,h4,h5,input,textarea,ul,ol,li,img{margin:0;padding:0;font-size:14px;font-family:"微软雅黑";}
.clear{clear:both;height:0;overflow:hidden;}
a img{border:none;}
a{text-decoration:none;cursor:pointer;}
var,em{font-style:normal;}
ul,ol{list-style-type:none;}
.slideBox{width:100%;height:400px;overflow:hidden;position:relative;min-width:990px;}
.slideBox .hd{height:16px;overflow:hidden;position:absolute;left:50%;bottom:5px;z-index:1;}
.slideBox .hd ul{overflow:hidden;zoom:1;float:left;}
.slideBox .hd ul li{cursor:pointer;width:3em;height:6px;background:#cdcdcd;opacity:0.4;filter:alpha(opacity=40);float:left;margin:0 .5em;}
.slideBox .hd ul li.on{background:red !important;}
.slideBox .bd{height:350px;width:100%;z-index:0;}
.slideBox .bd ul li{overflow:hidden;width:100%;height:400px;position:relative;}
.slideBox .bd li a{display:block;width:990px;height:400px;margin:0 auto;position:relative;}
/*第四屏*/
.banner1{width:100%;height:28.6em;background:linear-gradient(right,#041F4C 50%,#BE6E83 50%);background:-moz-linear-gradient(right,#041F4C 50%,#BE6E83 50%);background:-webkit-linear-gradient(right,#041F4C 50%,#BE6E83 50%);background:-ms-linear-gradient(right,#041F4C 50%,#BE6E83 50%);}
.content1{width:990px;height:400px;margin:0 auto;background:linear-gradient(right top,#041F4C 33%,#BE6E83 67%);background:-moz-linear-gradient(right top,#041F4C 33%,#BE6E83 67%);background:-webkit-linear-gradient(right top,#041F4C 33%,#BE6E83 67%);background:-ms-linear-gradient(right top,#041F4C 33%,#BE6E83 67%);position:relative;}
.b2_word{margin:7em 0 0 3em;float:right;}
.b2_word span{background:url(../images/yidong.png) no-repeat;width:10.3em;height:6.78em;float:left;}
.b2_word var{color:#FFFFFF;font-size:3.2em;float:left;margin:0.2em 0.2em;}
.animation20{background:url(../images/banner2.png) no-repeat;width:44em;height:28.6em;float:left;-webkit-animation:flash 2s .2s ease both;-moz-animation:flash 2s .2s ease both;}
@-webkit-keyframes flash{0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes flash{0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes flash{0%{opacity:0;}
100%{opacity:1;}
}
.animation21{-webkit-animation:fadeInDown 2s .2s ease both;-moz-animation:fadeInDown 2s .2s ease both;}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-1.5em)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-1.5em)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeInDown{0%{opacity:0;-ms-transform:translateY(-1.5em)}
100%{opacity:1;-ms-transform:translateY(0)}
}
#a24{position:absolute;left:27em;top:9.5em;margin:-1em 0 0 -9em;color:#FFFFFF;font-size:1.9em;border:1px solid #fff;height:2em;line-height:2em;border-radius:2em;-webkit-border-radius:2em;-moz-border-radius:2em;width:18.5em;text-align:center;}
.animation22{-webkit-animation:fadeInRight 1s .2s ease both;-moz-animation:fadeInRight 1s .2s ease both;}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(2em)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(2em)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeInRight{0%{opacity:0;-ms-transform:translateX(2em)}
100%{opacity:1;-ms-transform:translateX(0)}
}
/*新添加一屏*/
.slide ul li.banner5{width:100%;height:28.6em;background:url(../images/chunjie.png) center center no-repeat;}
/*第一屏*/
.slide ul li.banner2{width:100%;height:28.6em;background:url(../images/banner2_1.jpg) center center no-repeat;}
.content2{width:70.7em;height:28.6em;margin:0 auto;position:relative;display:inline-block;}
.animation5{background:url(../images/banner2_04.png) no-repeat;width:302px;height:77px;position:absolute;right:24%;top:55%;-webkit-animation:flash 3s 1s ease both;-moz-animation:flash 3s 1s ease both;}
@-webkit-keyframes flash{0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes flash{0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes flash{0%{opacity:0;}
100%{opacity:1;}
}
.animation3{background:url(../images/banner2_02.png) center center no-repeat;width:340px;height:43px;position:absolute;top:23%;left:26%;-webkit-animation:fadeInDown 2s 1s ease both;-moz-animation:fadeInDown 2s 1s ease both;}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-200px)}
30%{opacity:0.6;-webkit-transform:translateY(200px)}
60%{opacity:1;-webkit-transform:translateY(-10px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-200px)}
30%{opacity:0.6;-webkit-transform:translateY(200px)}
60%{opacity:1;-webkit-transform:translateY(-10px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-ms-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-200px)}
30%{opacity:0.6;-webkit-transform:translateY(200px)}
60%{opacity:1;-webkit-transform:translateY(-10px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
.animation4{background:url(../images/banner2_05.png) center center no-repeat;width:702px;height:128px;position:absolute;left:16%;top:30%;-webkit-animation:fadeInRight 2s ease both;-moz-animation:fadeInRight 2s ease both;}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(-10%)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(2em)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeInRight{0%{opacity:0;-ms-transform:translateX(2em)}
100%{opacity:1;-ms-transform:translateX(0)}
}
/*第三屏*/
.slide ul li.banner3{width:100%;height:28.6em;background:url(../images/banner3.jpg) center center no-repeat;}
.content3{width:70.7em;height:28.6em;margin:0 auto;display:inline-block;}
.animation6{background:url(../images/idc.png) no-repeat;width:19em;height:6em;margin:2.35em 0 0 8.6em;float:left;-webkit-animation:bounceInDown 1s .2s ease both;-moz-animation:bounceInDown 1s .2s ease both;}
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px)}
60%{opacity:1;-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px)}
60%{opacity:1;-moz-transform:translateY(30px)}
80%{-moz-transform:translateY(-10px)}
100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceInDown{0%{opacity:0;-ms-transform:translateY(-2000px)}
60%{opacity:1;-ms-transform:translateY(30px)}
80%{-ms-transform:translateY(-10px)}
100%{-ms-transform:translateY(0)}
}
#a9,#a10{opacity:0;filter:alpha(opacity=0);}
.animation7{font-size:3.2em;width:100%;float:left;margin:0.7em 0 0 2.5em;font-weight:bold;color:#333;-webkit-animation:fadeInDown 1s .2s ease both;-moz-animation:fadeInDown 1s .2s ease both;}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-2em)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-2em)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeInDown{0%{opacity:0;-ms-transform:translateY(-2em)}
100%{opacity:1;-ms-transform:translateY(0)}
}
.animation7 span{color:#009EFE;font-size:1em;}
/*新添第二屏*/
.slide ul li.banner4{width:100%;height:28.6em;background:url(../images/banner4.png) center center no-repeat;}
.animation8{background:url(../images/banner4_2.png) no-repeat;width:32.1em;height:10.6em;float:right;top:11.7em;right:10em;position:absolute;-webkit-animation:fadeInRightBig 3s .5s ease both;-moz-animation:fadeInRightBig 3s .5s ease both;}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(13em)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(13em)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeInRightBig{0%{opacity:0;-ms-transform:translateX(13em)}
100%{opacity:1;-ms-transform:translateX(0)}
}
.animation9{background:url(../images/banner4_1.png) no-repeat;width:62.5em;height:28.6em;float:left;-webkit-animation:fadeInLeftBig 3s .5s ease both;-moz-animation:fadeInLeftBig 3s .5s ease both;}
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-20em)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeftBig{0%{opacity:0;-moz-transform:translateX(-20em)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeInLeftBig{0%{opacity:0;-ms-transform:translateX(-20em)}
100%{opacity:1;-ms-transform:translateX(0)}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
948.38 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
948.38 KB
立即下载
柯咏彩
了解
打赏作者 鼓励作者
Html 焦点滚动特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章