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

当当网5屏切换焦点图推荐代码轮播滚动切换特效

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

以下是 当当网5屏切换焦点图推荐代码轮播滚动切换特效 的示例演示效果:

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

部分效果截图:

当当网5屏切换焦点图推荐代码轮播滚动切换特效

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="此代码内容为当当网5屏切换焦点图推荐代码" />
<title>当当网5屏切换焦点图推荐代码</title>
<link rev=stylesheet media=all href="css/css.css" type=text/css rel=stylesheet>
<script src="js/LanternN.js" type=text/javascript></script>
</head>
<body>

<script type=text/javascript>
   document.lanterninfo=function(){
   Lanterninfo=new Array();
   Lanterninfo=[
       ['images/01.jpg','礼品图书65折封顶，品牌百货送礼佳选！','#'],['images/02.jpg','万种图书岁末清仓 先到先得','#'],['images/03.jpg','百货年终出清1折到底','#'],['images/04.jpg','10万种图书低至50折封顶','#'],['images/05.jpg','运动休闲馆开业，20大国际品牌特惠','#']];
       return Lanterninfo;
   }   
</script>

<div id=lantern>
<div id=lanternMain>
<div id=lanternImg>
<div style="Z-INDEX: 100; WIDTH: 426px; BORDER-BOTTOM: #ffffff 1px solid; POSITION: absolute; TOP: 221px; HEIGHT: 2px"><IMG id=lanternPoint style="POSITION: absolute" src="images/lanternpoint.gif"> </div></div>
</div>
<div id=lanternNavy></div>
<script type=text/javascript>
   Lantern.info=parent.document.lanterninfo();
   Lantern.init();
</script>
</div>
</body></html>

JS代码(LanternN.js):

//ff֧��function isIE(){
	//ie? if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1) return true;
	else return false;
}
//��ҳ�õ�var Lantern={
	onChange:[],oInterval:[],otimeOut:[],opacityNum:101,cycNum:0,showNum:0,width:426,//������ navyCtr:[],//2ά:0.ԭ�� 1.Ŀ�곤 2.speed navyTime:10,//navy����ʱ�� picMoveSpeed:22,//ͼƬ�ƶ��ٶ� timeOut_time:7000,//ͣ��ʱ�� info://0.ͼƬurl 1.���� 2.���ӵ�ַ [],init:function(){
	Lantern.onChange=false;
	for(var i=0;
	i<Lantern.info.length;
	i++){
	var picDiv var picTemp picDiv=document.createElement('div');
	picTemp=document.createElement('img');
	picDiv.id ="LanternImg"+i;
	picDiv.name=i;
	picTemp.src = Lantern.info[i][0];
	picTemp.style.width = "426px";
	picDiv.style.position ="absolute";
	picDiv.style.left =Lantern.width+"px";
	picDiv.onclick=function(){
	window.open(Lantern.info[this.name][2]);
}
;
	picDiv.appendChild(picTemp);
	document.getElementById("lanternImg").appendChild(picDiv);
	var divTemp divTemp=document.createElement('div');
	divTemp.id ="LanternN"+i;
	divTemp.name=i;
	divTemp.innerHTML="<strong>"+(i+1)+"</strong><span id=\"lanternNc"+i+"\" style=\"display:none\">&nbsp;
	"+Lantern.info[i][1]+"</span>";
	if(i==0){
	divTemp.className ="div_off1";
}
else if(i==Lantern.info.length-1){
	divTemp.className ="div_off3";
}
else{
	divTemp.className ="div_off2";
}
//divTemp.className="div_off";
	if(i==0) divTemp.onclick=function(){
	window.open(Lantern.info[this.name][2]);
}
;
	else divTemp.onclick=function(){
	if(!Lantern.onChange){
	Lantern.onChange=true;
	Lantern.setNavy(this.name);
}
}
;
	document.getElementById("lanternNavy").appendChild(divTemp);
}
Lantern.initNany();
}
,initNany:function(){
	navyCtr=new Array();
	for(var k=0;
	k<Lantern.info.length;
	k++) Lantern.navyCtr[k]=[];
	document.getElementById("lanternNc0").style.display ="";
	document.getElementById("LanternN0").className ="div_on1";
	var onLength,offLength onLength=document.getElementById("LanternN0").offsetWidth offLength=(Lantern.width-onLength)/(Lantern.info.length-1) var numtemp=0;
	for(var j=0;
	j<Lantern.info.length;
	j++){
	if(j!=0)//δѡ{
	Lantern.navyCtr[j][1]=offLength;
	document.getElementById("lanternNc"+j).style.display ="none";
	if(j==Lantern.info.length-1){
	document.getElementById("LanternN"+j).className ="div_off3";
}
else{
	document.getElementById("LanternN"+j).className ="div_off2";
}
document.getElementById("LanternN"+j).style.width=offLength+"px";
	if(j==Lantern.info.length-1){
	document.getElementById("LanternN"+j).style.width=(Lantern.width-onLength-numtemp)+"px";
}
else{
	numtemp+=offLength;
}
}
else//��ѡ{
	Lantern.navyCtr[j][1]=onLength;
}
}
if(isIE()) document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN0").offsetLeft+10)+"px";
	else document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN0").offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
	document.getElementById("LanternImg0").style.display ="";
	document.getElementById("LanternImg0").style.left ="0px";
	Lantern.otimeOut=setTimeout("Lantern.cycLantern()",Lantern.timeOut_time);
}
,setNavy:function(i){
	if(i==Lantern.info.length-1) document.getElementById("lanternNavy").style.backgroundColor ="#CC3300";
	else document.getElementById("lanternNavy").style.backgroundColor ="#BBBBBB";
	document.getElementById("lanternNc"+i).style.display ="";
	if(i==0){
	document.getElementById("LanternN"+i).className ="div_on1";
}
else if(i==Lantern.info.length-1){
	document.getElementById("LanternN"+i).className ="div_on3";
}
else{
	document.getElementById("LanternN"+i).className ="div_on2";
}
document.getElementById("LanternN"+i).style.width=null;
	var onLength,offLength onLength=document.getElementById("LanternN"+i).offsetWidth offLength=(Lantern.width-onLength)/(Lantern.info.length-1) var numtemp=0;
	for(var j=0;
	j<Lantern.info.length;
	j++){
	Lantern.navyCtr[j][0]=Lantern.navyCtr[j][1];
	if(i!=j)//δѡ{
	Lantern.navyCtr[j][1]=offLength;
	document.getElementById("lanternNc"+j).style.display ="none";
	if(j==Lantern.info.length-1){
	document.getElementById("LanternN"+j).className ="div_off3";
}
else{
	document.getElementById("LanternN"+j).className ="div_off2";
}
if(j==Lantern.info.length-1){
	document.getElementById("LanternN"+j).style.width=(Lantern.width-onLength-numtemp)+"px";
}
else{
	numtemp+=offLength}
document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][0]+"px";
	Lantern.navyCtr[j][2]=(Lantern.navyCtr[j][1]-Lantern.navyCtr[j][0])/Lantern.navyTime;
}
else//��ѡ{
	Lantern.navyCtr[j][1]=onLength-34;
	document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][0]-34<=0?"0px":(Lantern.navyCtr[j][0]-34)+"px";
	Lantern.navyCtr[j][2]=(Lantern.navyCtr[j][1]-Lantern.navyCtr[j][0])/Lantern.navyTime;
}
}
document.getElementById("LanternImg"+i).style.display ="";
	if(Lantern.onChange){
	document.getElementById("LanternN"+i).onclick=function(){
	window.open(Lantern.info[this.name][2]);
}
;
	document.getElementById("LanternN"+Lantern.showNum).onclick=function(){
	if(!Lantern.onChange){
	Lantern.onChange=true;
	Lantern.setNavy(this.name);
}
}
;
	document.getElementById("LanternImg"+i).style.zIndex=0;
	document.getElementById("LanternImg"+Lantern.showNum).style.zIndex=-1;
	Lantern.oInterval=setInterval('Lantern.changeLantern('+i+')',10);
}
}
,imgMoveOver:false,navyMoveOver:false,changeLantern:function(i){
	if(Lantern.otimeOut!=null) clearTimeout(Lantern.otimeOut) //move if(!Lantern.navyMoveOver) Lantern.moveNavy(i);
	if(!Lantern.imgMoveOver){
	Lantern.moveImg(i);
}
else{
	Lantern.flashImg(i);
}
}
,moveNavy:function(select){
	var breaktime=0;
	for(var i=0;
	i<Lantern.info.length;
	i++){
	if((Lantern.navyCtr[i][2]>0&&document.getElementById("LanternN"+i).offsetWidth<Lantern.navyCtr[i][1])||(Lantern.navyCtr[i][2]<0&&document.getElementById("LanternN"+i).offsetWidth>Lantern.navyCtr[i][1])){
	if(i==select){
	document.getElementById("LanternN"+i).style.width=(document.getElementById("LanternN"+i).offsetWidth+Lantern.navyCtr[i][2]-34)+"px";
}
else{
	document.getElementById("LanternN"+i).style.width=(document.getElementById("LanternN"+i).offsetWidth+Lantern.navyCtr[i][2])+"px";
}
}
else{
	if(i==select){
	for(var j=0;
	j<Lantern.info.length;
	j++){
	document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][1]+"px";
}
if(isIE()) document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft+10)+"px";
	else document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
	Lantern.navyMoveOver=true;
	break;
}
}
if(i==select){
	if(isIE()) document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft+10)+"px";
	else document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
}
}
}
,moveImg:function(i){
	if(document.getElementById("LanternImg"+i).offsetLeft>0){
	document.getElementById("LanternImg"+i).style.left=(document.getElementById("LanternImg"+i).offsetLeft-Lantern.picMoveSpeed)+"px";
}
else{
	document.getElementById("LanternImg"+i).style.left="0px";
	document.getElementById("LanternImg"+Lantern.showNum).style.left=Lantern.width+"px";
	Lantern.imgMoveOver=true;
}
}
,flashImg:function(i){
	document.getElementById("LanternImg"+i).style.opacity="100";
	Lantern.showNum=i;
	Lantern.imgMoveOver=false;
	Lantern.navyMoveOver=false;
	Lantern.opacityNum=101;
	Lantern.cycNum=i;
	clearInterval(Lantern.oInterval);
	Lantern.otimeOut=setTimeout("Lantern.otimeOut=Lantern.cycLantern()",Lantern.timeOut_time);
	Lantern.onChange=false;
}
,cycLantern:function(){
	if(!Lantern.onChange){
	Lantern.onChange=true;
	if(Lantern.cycNum==Lantern.info.length-1) Lantern.cycNum=0;
	else Lantern.cycNum++;
	Lantern.setNavy(Lantern.cycNum)}
}
}

CSS代码(css.css):

BODY{LINE-HEIGHT:20px;HEIGHT:240px;position:absolute;}
#lantern{BORDER:#ffffff 1px solid;OVERFLOW:hidden;WIDTH:426px;CURSOR:pointer;HEIGHT:240px}
#lanternMain{WIDTH:426px;HEIGHT:224px;BACKGROUND-COLOR:#ffffff}
#lanternNavy{FONT-SIZE:12px;FLOAT:left;OVERFLOW:hidden;WIDTH:1000px;COLOR:#ffffff;HEIGHT:16px;TEXT-ALIGN:center}
#lanternNavy .div_off1{FLOAT:left;BORDER-LEFT:#ffcc00 0px solid;BORDER-BOTTOM:#ffffff 1px solid;HEIGHT:16px;BACKGROUND-COLOR:#bbbbbb;TEXT-ALIGN:center}
#lanternNavy .div_on1{PADDING-RIGHT:24px;PADDING-LEFT:10px;FLOAT:left;BORDER-LEFT:#ffcc00 0px solid;BORDER-BOTTOM:#ffffff 1px solid;HEIGHT:16px;BACKGROUND-COLOR:#cc3300}
#lanternNavy .div_off2{FLOAT:left;BORDER-LEFT:#ffcc00 1px solid;BORDER-BOTTOM:#ffffff 1px solid;HEIGHT:16px;BACKGROUND-COLOR:#bbbbbb;TEXT-ALIGN:center}
#lanternNavy .div_on2{PADDING-RIGHT:24px;PADDING-LEFT:10px;FLOAT:left;BORDER-LEFT:#ffcc00 1px solid;BORDER-BOTTOM:#ffffff 1px solid;HEIGHT:16px;BACKGROUND-COLOR:#cc3300}
#lanternNavy .div_off3{BORDER-RIGHT:#ffcc00 2px solid;FLOAT:left;BORDER-LEFT:#ffcc00 1px solid;BORDER-BOTTOM:#ffffff 1px solid;HEIGHT:16px;BACKGROUND-COLOR:#bbbbbb;TEXT-ALIGN:center}
#lanternNavy .div_on3{BORDER-RIGHT:#ffcc00 2px solid;PADDING-RIGHT:24px;PADDING-LEFT:10px;FLOAT:left;BORDER-LEFT:#ffcc00 1px solid;BORDER-BOTTOM:#ffffff 1px solid;HEIGHT:16px;BACKGROUND-COLOR:#cc3300}
#lanternImg{OVERFLOW:hidden;WIDTH:426px;position:absolute;HEIGHT:224px}
.jumppage{FLOAT:left;WIDTH:75px;HEIGHT:29px}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
187.60 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
187.60 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
打赏文章