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

jquery京东商城首页焦点图轮播滚动切换特效代码

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

以下是 jquery京东商城首页焦点图轮播滚动切换特效代码 的示例演示效果:

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

部分效果截图:

jquery京东商城首页焦点图轮播滚动切换特效代码

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>jquery京东商城首页焦点图</title>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/jd.css" />
<style>
.zxx_body .zxx_constr {width: 1210px;}
</style>
</head>

<body>

<div class="zxx_body">
	<div class="zxx_constr">
    	<!--  body of jd.html -->
        <div class="jd_body">
        	<div id="jdAdSlide" class="jd_ad_slide">
            	<img src="images/rBEhVlJ5oCUIAAAAAAE4O585pSAAAFGKgINDgcAAThT749.jpg" class="jd_ad_img">
                <img data-src="images/rBEhVlJ4ugUIAAAAAADNu0WERsYAAFE9ABekBAAAM3T074.jpg" class="jd_ad_img">
                <img data-src="images/rBEhUlJzCqoIAAAAAAE7yTNr8uEAAE2ggLjA1QAATvh176.jpg" class="jd_ad_img">
                <img data-src="images/rBEhVVJ40jMIAAAAAAEESo4hULIAAFFRgKzU_IAAQRi366.jpg" class="jd_ad_img">
                <img data-src="images/rBEhVlJ5oCUIAAAAAAE4O585pSAAAFGKgINDgcAAThT749.jpg" class="jd_ad_img">
                <img data-src="images/rBEhVlJ5mUEIAAAAAAFZ8YVO0RYAAFGEwKl9xAAAVoJ892.jpg" class="jd_ad_img">
                <img data-src="images/rBEhVlJ5sGsIAAAAAAEw4mmfc50AAFGdwOMkwIAATD6787.jpg" class="jd_ad_img">
                <div id="jdAdBtn" class="jd_ad_btn"></div><!-- add active -->
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-powerSwitch.js"></script>
<script>
// 大的图片广告
// 根据图片创建id,按钮元素等，实际开发建议使用JSON数据类似
var htmlAdBtn = '';
$("#jdAdSlide img").each(function(index, image) {
	var id = "adImage" + index;
	htmlAdBtn = htmlAdBtn + '<a href="javascript:" class="jd_ad_btn_a" data-rel="'+ id +'">'+ (index + 1) +'</a>';
	image.id = id;
});
$("#jdAdBtn").html(htmlAdBtn).find("a").powerSwitch({
	eventType: "hover",
	classAdd: "active",
	animation: "fade",
	autoTime: 5000,
	onSwitch: function(image) {
		if (!image.attr("src")) {
			image.attr("src", image.attr("data-src"));	
		}
	}
}).eq(0).trigger("mouseover");

// 便民服务
$("#servNav a").powerSwitch({
	classAdd: "active",
	eventType: "hover",
	onSwitch: function() {
		$("#pointLine").animate({ "left": $(this).position().left}, 200);
	}
});
</script>
</body>
</html>

JS代码(jquery-powerSwitch-min.js):

/*! * powerSwitch.js by sucaiweb(.com) * under MIT License * you can use powerSwitch to switch anything*/
(function(b,c,d){
	var a=typeof history.pushState=="function";
	c.powerSwitch=function(f,e){
	c(f).powerSwitch(e)}
;
	c.extend(c.powerSwitch,{
	getRelative:function(f,h){
	f=c(f);
	if(f.length==0){
	return c()}
var e=[],g=false;
	f.each(function(j,k){
	var i=c(this).attr(h.attribute)||(c(this).attr("href")||"").split("#")[1];
	if(i&&e[i]!=true){
	var l=c();
	if(/^\w+$/.test(i)){
	l=c("#"+i);
	if(l.length===0){
	l=c("."+i)}
if(l.length===0){
	l=c(i)}
}
else{
	l=c(i)}
l.each(function(m,n){
	e.push(n)}
);
	e[i]=true}
else{
	if(e[i]==true){
	g=true}
}
}
);
	f.data("isMoreToOne",g);
	return c(e)}
,transition:function(h,g,f){
	var e="transform "+g+"ms linear";
	if(a==false){
	return}
if(f==true){
	h.css("webkitTransition","none").css("transition","none").data("hasTransition",false)}
else{
	if(!h.data("hasTransition")){
	h.css({
	webkitTransition:"-webkit-"+e,webkitBackfaceVisibility:"hidden",transition:e,BackfaceVisibility:"hidden"}
).data("hasTransition",true)}
}
}
,translate:function(g,e,f){
	var h="translate"+e+"("+f+")";
	a?g.css("webkitTransform",h).css("transform",h):g.css(e=="X"?{
	left:f}
:{
	top:f}
)}
,animation:function(p,h,k){
	var f=null,n=this,l=k.animation=="none";
	var i=function(t,r,s){
	if(parseInt(s)===s){
	s+="px"}
if(a){
	n.transition(t,k.duration,l);
	n.translate(t,r,s)}
else{
	t[l?"css":"animate"](r=="X"?{
	left:s}
:{
	top:s}
,k.duration)}
}
;
	if((h&&h.length)||(p&&p.length)){
	if(k.toggle==true&&k.animation=="translate"){
	k.animation="none"}
switch(k.animation){
	case"translate":var j=p.data("index"),o=h.data("index");
	var g={
	vertical:"Y",horizontal:"X"}
;
	if(j!=d&&o!=d){
	var q=100,e=true;
	if(k.prevOrNext){
	switch(k.prevOrNext.attr("data-type")){
	case"prev":e=false;
	break;
	case"next":e=true;
	break;
	default:e=j<o}
}
q=(e*2-1)*100;
	n.transition(h.show(),k.duration,true);
	n.translate(h,g[k.direction],q+"%");
	setTimeout(function(){
	i(p,g[k.direction],-1*q+"%");
	i(h,g[k.direction],"0%")}
,17);
	k.prevOrNext=null}
else{
	p.hide();
	h.show()}
break;
	case"slide":if(k.duration!="sync"){
	if(p){
	p.slideUp(k.duration)}
if(h){
	h.slideDown(k.duration)}
}
else{
	if(p){
	p.slideUp("normal",function(){
	if(h){
	h.slideDown()}
}
)}
else{
	if(h){
	h.slideDown()}
}
}
break;
	case"fade":if(k.duration!="sync"){
	if(p){
	p.fadeOut(k.duration)}
if(h){
	h.fadeIn(k.duration)}
}
else{
	if(p){
	p.fadeOut("normal",function(){
	if(h){
	h.fadeIn()}
}
)}
else{
	if(h){
	h.fadeIn()}
}
}
break;
	case"visibility":if(p){
	p.css("visibility","hidden")}
if(h){
	h.css("visibility","visible")}
break;
	default:if(p){
	p.hide()}
if(h){
	h.show()}
}
}
else{
	if(k.container&&k.container.length){
	var m=k.container.data("position");
	f=k.container.get(0);
	if(k.direction=="vertical"){
	if(f.scrollHeight-f.clientHeight>=Math.max(m.top,1)){
	k.animation=="auto"?k.container.animate({
	scrollTop:m.top}
):k.container.scrollTop(m.top)}
else{
	i(k.container,"Y",-1*m.top)}
}
else{
	if(f.scrollWidth-f.clientWidth>=Math.max(m.left,1)){
	k.animation=="auto"?k.container.animate({
	scrollLeft:m.left}
):k.container.scrollLeft(m.left)}
else{
	i(k.container,"X",-1*m.left)}
}
}
}
}
}
);
	c.fn.powerSwitch=function(k){
	var s={
	direction:"horizontal",eventType:"click",classAdd:"",classRemove:"",classPrefix:"",attribute:"data-rel",animation:"auto",duration:250,container:null,autoTime:0,number:"auto",hoverDelay:200,toggle:false,onSwitch:c.noop}
;
	var z=c.extend({
}
,s,k||{
}
);
	c.each(["disabled","prev","play","pause","next"],function(C,F){
	F=c.trim(F);
	var G=F.slice(0,1).toUpperCase()+F.slice(1),E="class"+G,D=z.classPrefix.slice(-1);
	if(z[E]===d){
	if(z.classPrefix){
	if(/\-/g.test(z.classPrefix)){
	z[E]=D=="-"?(z.classPrefix+F):[z.classPrefix,F].join("-")}
else{
	if(/_/g.test(z.classPrefix)){
	z[E]=D=="_"?(z.classPrefix+F):[z.classPrefix,F].join("_")}
else{
	z[E]=z.classPrefix+G}
}
}
else{
	z[E]=F}
}
}
);
	var B=z.indexSelected||-1,h=parseInt(z.number)||1,f=null,w=null,v=c(),l=0;
	var u=c(this);
	if(u.length==0){
	if(z.container==null||z.autoTime==0){
	return u}
}
v=c.powerSwitch.getRelative(u,z);
	if((l=v.length)==0){
	return u}
if(B==-1&&z.toggle==false){
	if(z.classAdd){
	u.each(function(C,D){
	if(B!=-1){
	return}
if(c(D).hasClass(z.classAdd)){
	B=C}
}
)}
else{
	v.each(function(C,D){
	if(B!=-1){
	return}
if(z.animation=="visibility"){
	if(c(D).css("visibility")!="hidden"){
	B=C}
}
else{
	if(c(D).css("display")!="none"){
	B=C}
}
}
)}
}
var t=false,y=c(),A=c(),g=c();
	var m=function(C){
	if(C<=0){
	y.addClass(z.classDisabled).removeAttr("title").attr("disabled","disabled")}
else{
	y.removeClass(z.classDisabled).attr("title",y.data("title")).removeAttr("disabled")}
if((l-C)/h>1){
	A.removeClass(z.classDisabled).attr("title",A.data("title")).removeAttr("disabled")}
else{
	A.addClass(z.classDisabled).removeAttr("title").attr("disabled","disabled")}
}
;
	if(u.eq(0).data("isMoreToOne")==true){
	t=true;
	if(z.classDisabled){
	y=u.eq(0),A=u.eq(1);
	y.data("title",y.attr("title"));
	A.data("title",A.attr("title"));
	m(B);
	if(B<=0&&z.container){
	c(z.container).scrollLeft(0).scrollTop(0)}
}
else{
	if(z.container){
	v.clone().insertAfter(v.eq(l-1));
	v=c.powerSwitch.getRelative(u,z);
	g=u.eq(1)}
else{
	y=u.eq(0),A=u.eq(1);
	g=A}
}
}
var x=false;
	if(u.length==1&&l>1){
	x=true}
var r=function(G){
	var F=v.slice(G,G+h);
	var H=null,E=null,D=null;
	if(z.toggle==false){
	if(t==true){
	if(z.container){
	var C=F.position();
	z.container=c(z.container);
	z.container.data("position",C);
	c.powerSwitch.animation(null,null,z);
	z.classDisabled&&m(G)}
else{
	c.powerSwitch.animation(v.eq(B,B+h),F,z)}
z.onSwitch.call(this,F)}
else{
	if(x==true){
	c.powerSwitch.animation(null,F,z);
	z.onSwitch.call(this,F)}
else{
	E=u.eq(G);
	if(B>=0){
	H=u.eq(B);
	D=v.eq(B,B+h)}
else{
	H=c();
	D=c()}
E.addClass(z.classAdd).removeClass(z.classRemove);
	if(B!==G){
	H.addClass(z.classRemove).removeClass(z.classAdd)}
c.powerSwitch.animation(D,F,z);
	z.onSwitch.call(this,F,H,D)}
}
B=G}
else{
	if((z.animation=="visibility"&&F.css("visibility")=="hidden")||(z.animation!="visibility"&&F.css("display")=="none")){
	c.powerSwitch.animation(null,F,z);
	display=true}
else{
	c.powerSwitch.animation(F,null,z);
	display=false}
z.onSwitch.call(this,F,display)}
}
;
	var e=location.href.split("#")[1];
	u.each(function(C,D){
	c(D).data("index",C);
	if(t==true){
	c(D).bind("click",function(){
	var F,E;
	if(z.classDisabled){
	if(c(this).attr("disabled")){
	return false}
if(C==0){
	F=B-h;
	F=Math.max(0,F)}
else{
	if(C==1){
	F=B+h;
	F=Math.min(F,l-1)}
}
r.call(this,F)}
else{
	if(z.container&&l>h){
	if(C==0){
	F=B-h;
	if(F<0){
	E=v.eq(B+l);
	c(z.container).data("position",E.position());
	c.powerSwitch.animation(null,null,c.extend({
}
,z,{
	animation:"none"}
));
	F=B+l-h}
}
else{
	if(C==1){
	F=B+h;
	if(F>l*2-h){
	E=v.eq(B-l);
	c(z.container).data("position",E.position());
	c.powerSwitch.animation(null,null,c.extend({
}
,z,{
	animation:"none"}
));
	F=B-l+h}
}
}
r.call(this,F);
	g=c(this)}
else{
	C?o(this):n(this);
	g=c(this)}
}
return false}
)}
else{
	if(x==true){
	c(D).bind("click",function(){
	var E;
	if(z.number=="auto"){
	h=l}
if(!c(this).attr("disabled")){
	if(B==-1){
	E=0}
else{
	E=B+h}
r.call(this,E);
	if(E>=l-1){
	c(this).addClass(z.classDisabled).attr("disabled","disabled").removeAttr("title")}
}
return false}
)}
else{
	if(z.eventType=="click"){
	c(D).bind("click",function(){
	z.prevOrNext=c(this);
	r.call(this,C);
	return false}
);
	if(e&&D.href&&e==D.href.split("#")[1]){
	c(D).trigger("click")}
}
else{
	if(/^hover|mouseover$/.test(z.eventType)){
	c(D).hover(function(){
	z.prevOrNext=c(this);
	clearTimeout(f);
	f=setTimeout(function(){
	r.call(D,C)}
,parseInt(z.hoverDelay)||0)}
,function(){
	clearTimeout(f)}
)}
}
}
}
}
);
	v.each(function(C,D){
	c(D).data("index",C)}
);
	var o=function(C){
	var D=B+1;
	if(D>=l){
	D=0}
r.call(C||u.get(D),D)}
,n=function(C){
	var D=B-1;
	if(D<0){
	D=l-1}
r.call(C||u.get(D),D)}
,p=function(){
	g.trigger("click")}
,j=function(){
	clearTimeout(w);
	if(j.flagAutoPlay==true){
	w=setTimeout(function(){
	t==false?o():p();
	j()}
,z.autoTime)}
}
;
	if((x==false&&z.toggle==false&&t==false)||(t==true&&!z.classDisabled)){
	if(z.container&&t==false){
	var i="";
	u.length&&c.each(["Prev","Pause","Next"],function(C,D){
	if(z.autoTime==0&&D=="Pause"){
	return}
i=i+'<a href="javascript:" class="'+z["class"+D]+'" data-type="'+D.toLowerCase()+'"></a>'}
);
	z.container.append(i).delegate("a","click",function(){
	var C=c(this).attr("data-type"),E=z["class"+C.slice(0,1).toUpperCase()+C.slice(1)],D=B;
	switch(C){
	case"prev":z.prevOrNext=c(this);
	n();
	break;
	case"play":j.flagAutoPlay=true;
	c(this).attr("data-type","pause").removeClass(E).addClass(z.classPause);
	j();
	break;
	case"pause":j.flagAutoPlay=false;
	c(this).attr("data-type","play").removeClass(E).addClass(z.classPlay);
	j();
	break;
	case"next":z.prevOrNext=c(this);
	o();
	break}
return false}
)}
if(z.autoTime){
	var q=[u,v,z.container];
	if(t==true||(document.body.contains&&z.container&&z.container.get(0).contains(v.get(0)))){
	q=[u,z.container]}
c.each(q,function(C,D){
	if(D){
	D.hover(function(E){
	if(E.pageX!==d||z.eventType=="click"){
	clearTimeout(w)}
}
,function(E){
	if(E.pageX!==d||z.eventType=="click"){
	j()}
}
)}
}
);
	j.flagAutoPlay=true;
	j()}
}
return u}
}
)(window,jQuery);

CSS代码(common.css):

/* some reset*/
body{line-height:1.4;font-size:12px;color:#333;font-family:Arial,sans-serif;}
body,ul,ol,p,h1,h2,h3,h4,h5,h6{margin:0;}
ul,ol{padding-left:0;list-style-type:none;}
h4,h5,h6{font-size:100%;}
a{color:#34538b;text-decoration:none;}
a:hover{text-decoration:underline;}
img{border:0;}
/* constructor */
.zxx_constr{width:980px;margin-left:auto;margin-right:auto;}
.zxx_logo{position:absolute;top:0;margin-top:14px;}
.zxx_author_time{float:right;margin-top:40px;color:#999;font-family:tahoma;}
.zxx_api{width:40px;height:40px;line-height:40px;font-size:15px;font-family:tahoma;text-align:center;overflow:hidden;position:fixed;_position:absolute;right:0;top:0;color:#fff;background-color:#34538b;background-color:rgba(0,0,0,0);*background-color:#34538b;}
.zxx_api::before{content:'';width:80px;height:80px;border-radius:80px;background-color:#34538b;position:absolute;right:-40px;top:-40px;}
.zxx_api::after{content:'API';position:absolute;top:-4px;left:14px;}
.zxx_api:hover::before{background-color:#cd0000;}
.zxx_nav{border-top:2px solid #0b63c6;background-color:#1161ba;}
.zxx_nav_ul{width:100%;overflow:hidden;font-size:14px;font-weight:bold;}
.zxx_nav_li{float:left;}
.zxx_nav_a{display:block;padding:10px 25px;color:#fff;text-decoration:none;}
.zxx_nav_on{background-color:#fff;box-shadow:inset 1px 1px #ccc;color:#333;}
.zxx_nav_sp{float:right;margin-top:5px;font-size:12px;white-space:nowrap;}
.zxx_rbtn,.zxx_gbtn{display:inline-block;padding:5px 20px;color:#fff;font-weight:bold;text-decoration:none;vertical-align:middle;}
.zxx_rbtn{background-color:#cd0000;}
.zxx_gbtn{background-color:green;}
.zxx_rbtn:hover,.zxx_gbtn:hover{text-decoration:none;color:#fff;}
.zxx_btn:active,.zxx_gbtn:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.35);padding-top:6px;padding-bottom:4px;}

CSS代码(jd.css):

.jd_body{padding:62px 0 0 220px;height:400px;overflow:hidden;}
.jd_body img{vertical-align:bottom;}
.jd_ad_slide{width:670px;height:400px;float:left;position:relative;}
.jd_ad_img{position:absolute;left:0;top:0;width:100%;height:100%;display:none;}
.jd_ad_btn{position:absolute;right:3px;bottom:8px;}
.jd_ad_btn_a{width:22px;height:22px;line-height:22px;margin-right:5px;text-align:center;border-radius:12px;background-color:#999;color:#fff;float:left;}
.jd_ad_btn_a:hover{text-decoration:none;}
.jd_ad_btn .active{background-color:#E4393C;}
.jd_service{width:310px;padding-top:230px;float:right;}
.jd_nav_x{height:30px;margin:0;overflow:hidden;position:relative;}
.js_nav_a{width:25%;*width:24.9%;line-height:20px;padding:5px 0;text-align:center;font-size:14px;font-family:'microsoft yahei';float:left;}
.jd_nav_x .active{color:#E4393C;}
.jd_service_con{height:136px;border:1px solid #f1f1f1;border-top:2px solid #aaa;position:relative;}
.jd_service_img{position:absolute;display:none;}
.jd_point_line{position:absolute;top:-2px;left:0;z-index:1;width:25%;border-bottom:2px solid #E4393C;text-align:center;}
.jd_point_cor{position:absolute;bottom:0;left:50%;width:0;height:0;margin-left:-5px;border-style:dashed dashed solid;border-width:5px;border-color:transparent transparent #E4393C;overflow:hidden;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
477.21 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
477.21 KB
立即下载
吕晶华
了解
打赏作者 鼓励作者
Html 焦点滚动特效4
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章