走秀网JS四屏焦点图代码轮播滚动切换特效

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

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

以下是走秀网JS四屏焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(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=gb2312" />
    <meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为走秀网JS四屏焦点图代码" />
    <title>走秀网JS四屏焦点图代码</title>
    <link href="/favicon.ico" type=image/x-icon rel="shortcut icon" />
    <link rev=stylesheet media=all href="css/css.css" type=text/css rel=stylesheet />
    <script src="js/jquery1.2.6.pack.js" type=text/javascript></script>
    <script src="js/player.js" type=text/javascript></script>
</head>
<body>
    <br />
    <br />
    <table width="910" height="409" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="306" align="center">
                <div class=center_3c>
                    <div id=myjQuery>
                        <div id=myjQueryContent>
                            <div>
                                <a href="#" target=_blank>
                                    <img src="images/U21D1234081697R742.jpg" />
                                </a>
                            </div>
                            <div class=smask>
                                <a href="#"
                                   target=_blank>
                                    <img src="images/U21D1232593453R758.jpg" />
                                </a>
                            </div>
                            <div class=smask>
                                <a href="#"
                                   target=_blank>
                                    <img src="images/U21D1232593392R437.jpg" />
                                </a>
                            </div>
                            <div class=smask>
                                <a href="#"
                                   target=_blank>
                                    <img src="images/U21D1231919614R506.jpg" />
                                </a>
                            </div>
                        </div>
                        <ul id=myjQueryNav>
                            <li class=current>
                                <a href="#"
                                   target=_blank>
                                    2009情人节<br />
                                    攻略三部曲
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                   target=_blank>
                                    给闺蜜的礼物<br />
                                    两件新衣80元起
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                   target=_blank>
                                    09运动新品<br />
                                    新年8折起！
                                </a>
                            </li>
                            <li class=nbg>
                                <a href="#"
                                   target=_blank>
                                    新年给家人一次<br />
                                    奢华的享受
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

JS代码(player.js):

// JavaScript DocumentjQuery(function($){
	var index = 0;
	$('<div id="flow"></div>').appendTo("#myjQuery");
	//滑动导航改变内容$("#myjQueryNav li").hover(function(){
	if(MyTime){
	clearInterval(MyTime);
}
index = $("#myjQueryNav li").index(this);
	MyTime = setTimeout(function(){
	ShowjQueryFlash(index);
	$('#myjQueryContent').stop();
}
,400);
}
,function(){
	clearInterval(MyTime);
	MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	index++;
	if(index==4){
	index=0;
}
}
,3000);
}
);
	//滑入 停止动画，滑出开始动画. $('#myjQueryContent').hover(function(){
	if(MyTime){
	clearInterval(MyTime);
}
}
,function(){
	MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	index++;
	if(index==4){
	index=0;
}
}
,3000);
}
);
	//自动播放var MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	index++;
	if(index==4){
	index=0;
}
}
,3000);
}
);
	function ShowjQueryFlash(i){
	$("#myjQueryContent div").eq(i).animate({
	opacity:1}
,1000).css({
	"z-index":"1"}
).siblings().animate({
	opacity:0}
,1000).css({
	"z-index":"0"}
);
	$("#flow").animate({
	left:i*122+5 +"px"}
,300 );
	//滑块滑动$("#myjQueryNav li").eq(i).addClass("current").siblings().removeClass("current");
}

CSS代码(css.css):

BODY{PADDING-RIGHT:0px;PADDING-LEFT:0px;FONT-SIZE:12px;BACKGROUND:#ffffff;PADDING-BOTTOM:0px;MARGIN:0px;COLOR:#000000;PADDING-TOP:0px;FONT-FAMILY:"����","������",Arial,Helvetica,sans-serif}
A{FONT-SIZE:12px;COLOR:#000000;TEXT-DECORATION:none}
A:link{COLOR:#000000}
A:visited{COLOR:#333333}
A:hover{COLOR:#f5811d}
A:active{COLOR:#000000}
UL{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;LIST-STYLE-TYPE:none}
LI{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;LIST-STYLE-TYPE:none}
IMG{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px}
#myjQuery{PADDING-RIGHT:5px;PADDING-LEFT:5px;BACKGROUND:#b7a490;PADDING-BOTTOM:5px;OVERFLOW:hidden;WIDTH:488px;PADDING-TOP:5px;POSITION:relative;HEIGHT:275px}
#myjQueryContent{BORDER-RIGHT:#ffffff 1px solid;BORDER-TOP:#ffffff 1px solid;OVERFLOW:hidden;BORDER-LEFT:#ffffff 1px solid;WIDTH:486px;BORDER-BOTTOM:#ffffff 1px solid;HEIGHT:224px}
#myjQueryContent DIV{POSITION:absolute;HEIGHT:224px;left:6px;top:6px;}
#myjQueryContent .smask{Z-INDEX:-1}
#myjQueryContent IMG{WIDTH:486px;HEIGHT:224px}
#myjQueryNav{BORDER-TOP:#ffffff 2px solid;DISPLAY:block;OVERFLOW:hidden;WIDTH:488px;HEIGHT:47px}
#myjQueryNav LI{DISPLAY:block;FLOAT:left;WIDTH:122px;CURSOR:pointer;PADDING-TOP:7px;HEIGHT:40px;TEXT-ALIGN:center}
#myjQueryNav .nbg{BACKGROUND:none transparent scroll repeat 0% 0%}
#myjQueryNav A{DISPLAY:block;Z-INDEX:12;MARGIN:0px auto;TEXT-TRANSFORM:uppercase;WIDTH:85px;COLOR:#ffffff;LINE-HEIGHT:16px;POSITION:relative;HEIGHT:47px}
#myjQueryNav .current{BACKGROUND:none transparent scroll repeat 0% 0%}
#myjQueryNav .current A{COLOR:#f6821e}
#myjQuery #flow{MARGIN-TOP:-47px;Z-INDEX:10;BACKGROUND:url(../images/fcurrent.gif);LEFT:5px;WIDTH:122px;POSITION:absolute;HEIGHT:47px}

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