360Shop网站首页轮播焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 360Shop网站首页轮播焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>360Shop网站首页轮播焦点图 </title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<!--[if IE 6]>
<script src="js/iepng.js" type="text/javascript"></script>
<script type="text/javascript">
   EvPNG.fix('div, ul, img, li, input'); 
</script>
<![endif]-->
</head>
<body>
<div class="gw_zzsc">
	<ul class="fix_flash">
        <li imglink="images/banner_05.jpg">
        	<a style="background:url(images/banner_05.jpg) center top no-repeat" href="http://13141618.taobao.com/"></a>
        </li>
		<li imglink="images/banner_08.jpg">
        	<a style="background:url(images/banner_08.jpg) center top no-repeat" href="http://13141618.taobao.com/"></a>
        </li>
		<li imglink="images/banner_06.jpg">
        	<a style="background:url(images/banner_06.jpg) center top no-repeat" href="http://13141618.taobao.com/"></a>
        </li>
    </ul>
    <div class="gw_zzsc_center">
    	<div class="gw_zzsc_flash_v">
        	<div style="width:96px; height:54px; overflow:hidden;">
            	<img src="images/banner_05.jpg">
            </div>
		</div>
    	<div class="gw_zzsc_flash_s"></div>
	</div>
</div>
<script>
$(document).ready(function(){
	$(".gw_zzsc li").css("width",$("body").width()+"px");
	$(".gw_zzsc li").css("cursor","pointer");
	$(".gw_zzsc ul").css("width","999999px");
	var str = "";
	for(i=0;i<$(".fix_flash li").length;i++){
		str += "<div class='gw_zzsc_sele' number="+i+" onclick='GW_FIX_scroll(this)'></div>"
		}
	$(".gw_zzsc_center").css("left",$("body").width()*0.5+250+"px")
	$(".gw_zzsc_flash_s").html(str);
	$(".gw_zzsc_sele").eq(0).addClass("gw_zzsc_over")
})
</script>
</body>
</html>

JS代码(iepng.js):

eval(function(p,a,c,k,e,r){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--)r[e(c)]=k[c]||e(c);
	k=[function(e){
	return r[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
	return p}
('2 E={
	J:\'E\',Z:{
}
,1E:7(){
	4(x.1l&&!x.1l[6.J]){
	x.1l.23(6.J,\'24:25-26-27:3\')}
4(1F.11){
	1F.11(\'28\',7(){
	E=29}
)}
}
,1G:7(){
	2 a=x.1m(\'8\');
	x.1H.1b.1n(a,x.1H.1b.1b);
	2 b=a.1o;
	b.1c(6.J+\'\\\\:*\',\'{
	12:2a(#1I#2b)}
\');
	b.1c(6.J+\'\\\\:9\',\'Q:1p;
	\');
	b.1c(\'1J.\'+6.J+\'1K\',\'12:y;
	1q:y;
	Q:1p;
	z-2c:-1;
	1d:-1r;
	1L:1M;
	\');
	6.1o=b}
,1N:7(){
	2 a=13.2d;
	4(13.1e.K(\'2e\')!=-1||13.1e.K(\'1q\')!=-1){
	E.1f(a)}
4(13.1e==\'8.1s\'){
	2 b=(a.F.1s==\'y\')?\'y\':\'2f\';
	G(2 v M a.3){
	a.3[v].9.8.1s=b}
}
4(13.1e.K(\'14\')!=-1){
	E.1t(a)}
}
,1t:7(a){
	4(a.F.14.K(\'2g\')!=-1){
	2 b=a.F.14;
	b=1u(b.2h(b.1v(\'=\')+1,b.1v(\')\')),10)/2i;
	a.3.N.9.8.14=a.F.14;
	a.3.C.I.2j=b}
}
,15:7(a){
	2k(7(){
	E.1f(a)}
,1)}
,2l:7(a){
	2 b=a.1O(\',\');
	G(2 i=0;
	i<b.2m;
	i++){
	6.1o.1c(b[i],\'12:2n(E.1P(6))\')}
}
,1f:7(a){
	a.S.1Q=\'\';
	6.1R(a);
	6.16(a);
	6.1t(a);
	4(a.O){
	6.1S(a)}
}
,1T:7(b){
	2 c=6;
	2 d={
	2o:\'16\',2p:\'16\'}
;
	4(b.17==\'A\'){
	2 e={
	2q:\'15\',2r:\'15\',2s:\'15\',2t:\'15\'}
;
	G(2 a M e){
	d[a]=e[a]}
}
G(2 h M d){
	b.11(\'1w\'+h,7(){
	c[d[h]](b)}
)}
b.11(\'2u\',6.1N)}
,1x:7(a){
	a.8.2v=1;
	4(a.F.Q==\'2w\'){
	a.8.Q=\'2x\'}
}
,1S:7(a){
	2 b={
	\'2y\':P,\'2z\':P,\'2A\':P}
;
	G(2 s M b){
	a.3.N.9.8[s]=a.F[s]}
}
,1R:7(a){
	4(!a.F){
	1g}
U{
	2 b=a.F}
G(2 v M a.3){
	a.3[v].9.8.1U=b.1U}
a.S.18=\'\';
	a.S.19=\'\';
	2 c=(b.18==\'1V\');
	2 d=P;
	4(b.19!=\'y\'||a.O){
	4(!a.O){
	a.D=b.19;
	a.D=a.D.2B(5,a.D.1v(\'")\')-5)}
U{
	a.D=a.1h}
2 e=6;
	4(!e.Z[a.D]){
	2 f=x.1m(\'1J\');
	e.Z[a.D]=f;
	f.2C=e.J+\'1K\';
	f.S.1Q=\'12:y;
	Q:1p;
	1y:-1r;
	1d:-1r;
	1q:y;
	\';
	f.11(\'2D\',7(){
	6.1i=6.2E;
	6.1j=6.2F;
	e.16(a)}
);
	f.1h=a.D;
	f.1W(\'1i\');
	f.1W(\'1j\');
	x.1X.1n(f,x.1X.1b)}
a.3.C.I.1h=a.D;
	d=V}
a.3.C.I.1w=!d;
	a.3.C.I.N=\'y\';
	a.3.N.9.8.18=b.18;
	a.S.19=\'y\';
	a.S.18=\'1V\'}
,16:7(e){
	2 f=e.F;
	2 g={
	\'W\':e.2G+1,\'H\':e.2H+1,\'w\':6.Z[e.D].1i,\'h\':6.Z[e.D].1j,\'L\':e.2I,\'T\':e.2J,\'1k\':e.2K,\'1z\':e.2L}
;
	2 i=(g.L+g.1k==1)?1:0;
	2 j=7(a,l,t,w,h,o){
	a.2M=w+\',\'+h;
	a.2N=o+\',\'+o;
	a.2O=\'2P,1Y\'+w+\',1Y\'+w+\',\'+h+\'2Q,\'+h+\' 2R\';
	a.8.1i=w+\'u\';
	a.8.1j=h+\'u\';
	a.8.1y=l+\'u\';
	a.8.1d=t+\'u\'}
;
	j(e.3.N.9,(g.L+(e.O?0:g.1k)),(g.T+(e.O?0:g.1z)),(g.W-1),(g.H-1),0);
	j(e.3.C.9,(g.L+g.1k),(g.T+g.1z),(g.W),(g.H),1);
	2 k={
	\'X\':0,\'Y\':0}
;
	2 m=7(a,b){
	2 c=P;
	2S(b){
	1a\'1y\':1a\'1d\':k[a]=0;
	1A;
	1a\'2T\':k[a]=.5;
	1A;
	1a\'2U\':1a\'2V\':k[a]=1;
	1A;
	1I:4(b.K(\'%\')!=-1){
	k[a]=1u(b)*.2W}
U{
	c=V}
}
2 d=(a==\'X\');
	k[a]=2X.2Y(c?((g[d?\'W\':\'H\']*k[a])-(g[d?\'w\':\'h\']*k[a])):1u(b));
	4(k[a]==0){
	k[a]++}
}
;
	G(2 b M k){
	m(b,f[\'2Z\'+b])}
e.3.C.I.Q=(k.X/g.W)+\',\'+(k.Y/g.H);
	2 n=f.30;
	2 p={
	\'T\':1,\'R\':g.W+i,\'B\':g.H,\'L\':1+i}
;
	2 q={
	\'X\':{
	\'1B\':\'L\',\'1C\':\'R\',\'d\':\'W\'}
,\'Y\':{
	\'1B\':\'T\',\'1C\':\'B\',\'d\':\'H\'}
}
;
	4(n!=\'1D\'){
	2 c={
	\'T\':(k.Y),\'R\':(k.X+g.w),\'B\':(k.Y+g.h),\'L\':(k.X)}
;
	4(n.K(\'1D-\')!=-1){
	2 v=n.1O(\'1D-\')[1].31();
	c[q[v].1B]=1;
	c[q[v].1C]=g[q[v].d]}
4(c.B>g.H){
	c.B=g.H}
e.3.C.9.8.1Z=\'20(\'+c.T+\'u \'+(c.R+i)+\'u \'+c.B+\'u \'+(c.L+i)+\'u)\'}
U{
	e.3.C.9.8.1Z=\'20(\'+p.T+\'u \'+p.R+\'u \'+p.B+\'u \'+p.L+\'u)\'}
}
,1P:7(a){
	a.8.12=\'y\';
	4(a.17==\'32\'||a.17==\'33\'||a.17==\'34\'){
	1g}
a.O=V;
	4(a.17==\'35\'){
	4(a.1h.21().K(/\\.22$/)!=-1){
	a.O=P;
	a.8.1L=\'1M\'}
U{
	1g}
}
U 4(a.F.19.21().K(\'.22\')==-1){
	1g}
2 b=E;
	a.3={
	N:{
}
,C:{
}
}
;
	2 c={
	9:{
}
,I:{
}
}
;
	G(2 r M a.3){
	G(2 e M c){
	2 d=b.J+\':\'+e;
	a.3[r][e]=x.1m(d)}
a.3[r].9.36=V;
	a.3[r].9.37(a.3[r].I);
	a.38.1n(a.3[r].9,a)}
a.3.C.9.39=\'y\';
	a.3.C.I.3a=\'3b\';
	a.3.N.I.1w=V;
	b.1T(a);
	b.1x(a);
	b.1x(a.3c);
	b.1f(a)}
}
;
	3d{
	x.3e("3f",V,P)}
3g(r){
}
E.1E();
	E.1G();
	',62,203,'||var|vml|if||this|function|style|shape|||||||||||||||||||||px|||document|none||||image|vmlBg|EvPNG|currentStyle|for||fill|ns|search||in|color|isImg|true|position||runtimeStyle||else|false||||imgSize||attachEvent|behavior|event|filter|handlePseudoHover|vmlOffsets|nodeName|backgroundColor|backgroundImage|case|firstChild|addRule|top|propertyName|applyVML|return|src|width|height|bLW|namespaces|createElement|insertBefore|styleSheet|absolute|border|10000px|display|vmlOpacity|parseInt|lastIndexOf|on|giveLayout|left|bTW|break|b1|b2|repeat|createVmlNameSpace|window|createVmlStyleSheet|documentElement|default|img|_sizeFinder|visibility|hidden|readPropertyChange|split|fixPng|cssText|vmlFill|copyImageBorders|attachHandlers|zIndex|transparent|removeAttribute|body|0l|clip|rect|toLowerCase|png|add|urn|schemas|microsoft|com|onbeforeunload|null|url|VML|index|srcElement|background|block|lpha|substring|100|opacity|setTimeout|fix|length|expression|resize|move|mouseleave|mouseenter|focus|blur|onpropertychange|zoom|static|relative|borderStyle|borderWidth|borderColor|substr|className|onload|offsetWidth|offsetHeight|clientWidth|clientHeight|offsetLeft|offsetTop|clientLeft|clientTop|coordsize|coordorigin|path|m0|l0|xe|switch|center|right|bottom|01|Math|ceil|backgroundPosition|backgroundRepeat|toUpperCase|BODY|TD|TR|IMG|stroked|appendChild|parentNode|fillcolor|type|tile|offsetParent|try|execCommand|BackgroundImageCache|catch'.split('|'),0,{
}
))/**Author:EvcnEmail:evcn@163.comURL:http://www.evsj.cn**/

JS代码(zzsc.js):

$(document).ready(function(){
	$(".gw_nav ul li").hover(function(){
	if($(this).offset().left==$(".gw_nav").offset().left){
	return false;
}
$(".gw_nav_po").css("display","block") .css("left",$(this).offset().left-$(".gw_nav").offset().left+50+"px") .css("top",33+"px")}
,function(){
	$(".gw_nav_po").css("display","none")}
)$(".gw_nav ul li").eq(1).hover(function(){
	$(".gw_navpro_li").css("left",0+"px")$(".gw_navpro_li").stop(true,true).show(150)$(".gw_navpro_li").hover(function(){
	return;
}
,function(){
	$(".gw_navpro_li").stop(true,true).hide(150)}
)}
,function(){
	$("body").click(function(e){
	var o = $(".gw_navpro_li");
	if(e.pageX > o.offset().left && e.pageX < (o.offset().left + o.width()) && e.pageY >　o.offset().top && e.pageY < (o.offset().top + o.height()) ){
}
else{
	$(".gw_navpro_li").stop(true,true).hide(150)}
}
)}
)//cust_flash_s();
	$(".gw_cust_flash_s ul li").eq(0).css("background","#ff9000");
	GW_FIX_TIMER = setInterval("cust_flash()",3000)head_faq();
	$(".gw_jj_list").find("li").hover(function(){
	$(".gw_jj_show").animate({
	"margin-left":0-741*$(this).index()+"px"}
,400)}
)}
)window.onresize=function(){
	head_faq();
}
function head_faq(){
	var id = $(".gw_head_link_ico").eq(0);
	$(".gw_head_link_ico").eq(0).hover(function(){
	$(".head_faq").css("top",id.offset().top+id.height()+"px")$(".head_faq").css("left",960 - $(".head_faq").width()+"px")$(".head_faq").show();
}
,function(){
	$(".head_faq").hover(function(){
	$(".head_faq").show();
}
,function(){
	$(".head_faq").hide();
	return;
}
)$(".head_faq").hide();
}
)}
var po_now=0;
	var cust_step=1000;
	var GW_FIX_TIMER;
	function cust_flash(){
	if(po_now == $(".gw_zzsc_sele").length-1){
	po_now=0;
}
else{
	po_now++;
}
cust_flash_scroll(po_now);
}
function cust_flash_scroll(n){
	$(".fix_flash").stop(true,false).animate({
	left:0-n*$(".fix_flash li").width()+"px"}
,500)$(".gw_zzsc_sele").removeClass("gw_zzsc_over")$(".gw_zzsc_sele").eq(n).addClass("gw_zzsc_over")//var theleft = $(".gw_zzsc_sele").eq(n).offset().left - 0.5*$("body").width() + 550 - 48 + 5;
	var theleft = 122 + 26*n;
	var str = "<img src='"+$(".fix_flash").find("li").eq(n).attr("imglink")+"' style='margin-left:-27px;
	' />"$(".gw_zzsc_flash_v div").html(str)$(".gw_zzsc_flash_v").stop(true,true).animate({
	"left":theleft+"px"}
,500)}
function cust_flash_s(){
	$(".gw_zzsc_sele").click(function(){
	po_now=parseInt($(this).attr("number"));
	cust_flash_scroll(po_now);
}
)}
function GW_FIX_scroll(obj){
	clearTimeout(GW_FIX_TIMER);
	cust_flash_scroll($(obj).attr("number"));
	GW_FIX_TIMER = setInterval("cust_flash()",3000)}

CSS代码(zzsc.css):

@charset "utf-8";*{margin:0;padding:0;}
body{padding:0;margin:0;behavior:url("../images/hover.htc");}
img{border:0px;}
a{text-decoration:none;}
ul,li{list-style:none;margin:0px;padding:0px;}
.gw_zzsc{position:relative;width:100%;height:406px;overflow:hidden;margin-top:-40px;z-index:0;_z-index:0;}
.gw_zzsc ul.fix_flash{height:406px;overflow:hidden;position:absolute;}
.gw_zzsc ul.fix_flash li{width:100%;height:406px;overflow:hidden;float:left;display:inline;cursor:pointer;}
.gw_zzsc ul.fix_flash li a{display:block;height:400px;width:100%;cursor:pointer;}
.gw_zzsc_center{width:300px;height:106px;margin:0px auto;position:absolute;overflow:hidden;top:300px;left:1000px;}
.gw_zzsc_center .gw_zzsc_flash_v{width:96px;height:54px;padding:2px 5px 12px 3px;overflow:hidden;background:url(../images/small_banner_box.png) no-repeat;position:absolute;left:122px;}
.gw_zzsc_center .gw_zzsc_flash_v img{width:191px;height:54px;margin-left:-27px;position:relative;}
.gw_zzsc_flash_s{height:5px;bottom:20px;position:absolute;right:60px;text-align:right;}
.gw_zzsc_flash_s .banner_smallArea{width:100%;}
.gw_zzsc_flash_s .gw_zzsc_sele{float:left;display:inline;width:24px;height:5px;margin-left:2px;background:#2d74a2;line-height:5px;overflow:hidden;cursor:pointer;}
.gw_zzsc_flash_s .gw_zzsc_over{background:#ff9000;}

附件:下载该文件资源,减少时间成本(增值服务)