拍拍网7屏切换产品推荐代码轮播滚动切换特效

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

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

以下是拍拍网7屏切换产品推荐代码轮播滚动切换特效的示例演示效果:

当前平台(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="此代码内容为拍拍网7屏切换产品推荐代码" />
<title>拍拍网7屏切换产品推荐代码</title>
<link rel="stylesheet" rev="stylesheet" href="css/css.css" type="text/css" media="all" />
</head>

<body>
<DIV class="absolute overflow" id=push style="LEFT: 203px; WIDTH: 293px; TOP: 0px">
<DIV id=mainPush></DIV>
<DIV id=linkPush style="BACKGROUND: url(images/pushBg.gif); HEIGHT: 43px"></DIV></DIV>

<script type=text/javascript>
function $(x){
    return document.getElementById(x);
}
rnd.today=new Date(); 
rnd.seed=rnd.today.getTime(); 
function rnd(){ 
	rnd.seed = (rnd.seed*9301+49297) % 233280; 
	return rnd.seed/(233280.0); 
}
function rand(number){ 
	return Math.ceil(rnd()*number)-1; 
}
//标题 .title
var pushName=["图片一","图片二","图片三","图片四","图片五","图片六","图片七"];
//图片 .image
var pushSrc=["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg","images/06.jpg","images/07.jpg",];
//链接 .link
var pushLink=["http://www.baidu.com#1","http://www.baidu.com#2","http://www.baidu.com#3","http://www.baidu.com#4","http://www.baidu.com#5","http://www.baidu.com#6","http://www.baidu.com#7"]
var pushShow="";
function showPushLink(num){
	if(!num&&num!=0){
		mainPushNum++;
		if(mainPushNum>6) mainPushNum=0;
		num=mainPushNum;
	}
	for(i=0;i<7;i++){
		$("linkPush"+i).className="";
		$("linkPush"+i).innerHTML="<img src='images/push"+i+".gif'>";
	}
	$("linkPush"+num).className="linkPushHere";
	$("linkPush"+num).innerHTML="<strong class='fontOrange'>"+(num+1)+".</strong>"+pushName[num];
	$("pushImg").src=pushSrc[num];
	$("pushImgLink").href=pushLink[num];
	$("pushImg").alt=pushName[num];
}
//初始化
for(i=0;i<7;i++){
	pushShow+='<a href="'+pushLink[i]+'" onmouseover="showPushLink('+i+');clearInterval(rollId)" id="linkPush'+i+'" target="_blank"><img src="images/push'+i+'.gif"></a>';
}
$("linkPush").innerHTML=pushShow;
var mainPushNum=rand(7);
$("linkPush"+mainPushNum).className="linkPushHere";
$("linkPush"+mainPushNum).innerHTML="<strong class='fontOrange'>"+(mainPushNum+1)+".</strong>"+pushName[mainPushNum];
$("mainPush").innerHTML='<a href="'+pushLink[mainPushNum]+'" target="_blank" id="pushImgLink" onmouseover="clearInterval(rollId)" onmouseout="showAtTime()"><img src="'+pushSrc[mainPushNum]+'" name="pushImg" width="293" height="316" id="pushImg" alt="'+pushName[mainPushNum]+'" /></a>';
var rollId=setInterval("showPushLink()",5000);
function showAtTime(){
	showPushLink();
	rollId=setInterval("showPushLink()",5000);
}
</script>
</body>
</html>

CSS代码(css.css):

/* 代码整理：懒人图库 ＊珍惜他人劳动，转载请自觉注明出处 */
BODY{FONT:12px "Verdana";COLOR:#333333;TEXT-ALIGN:center}
IMG{BORDER:0px;}
#linkPush A{PADDING-RIGHT:5px;DISPLAY:block;PADDING-LEFT:7px;FLOAT:left;PADDING-BOTTOM:0px;COLOR:#333;PADDING-TOP:6px;HEIGHT:28px;TEXT-ALIGN:center;TEXT-DECORATION:none}
#linkPush A:hover{BACKGROUND:url(../images/pushHere.gif) no-repeat;WIDTH:92px;PADDING-TOP:8px;FONT-FAMILY:"宋体";TEXT-ALIGN:center}
#linkPush A.linkPushHere{BACKGROUND:url(../images/pushHere.gif) no-repeat;WIDTH:92px;PADDING-TOP:8px;FONT-FAMILY:"宋体";TEXT-ALIGN:center}
.overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

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