ebay幻灯片产品展示效果轮播滚动切换特效代码

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

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

以下是 ebay幻灯片产品展示效果轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>ebay</title>
<LINK href="css/css.css" type=text/css rel=stylesheet>
</head>

<body>
<div id=carousel>
	<div class=frame>
		<div class=frames id=stage>
			<a href="#" target="_blank">
				<div id=f1 style="BACKGROUND: url(images/01.jpg); OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px"></div>
			</a>
			<a href="#" target="_blank">
				<div class=frame-2 id=f2 ></div>
			</a>
			<a href="#" target="_blank">
				<div class=frame-3 id=f3 ></div>
			</a>
			<a href="#" target="_blank">
				<div class=frame-4 id=f4 ></div>
			</a>
			<a href="#" target="_blank">
				<div class=frame-5 id=f5 ></div>
			</a>
		</div>
	</div>
	<div class=controls>
		<div class="arrow l-a" onmouseover=highlightA(this); onclick=prevF(); 
		onmouseout=dehighlightA(this);></div>
		<div class=off id=control1 onmouseover=hover(1) onclick=press(1,false) 
		onmouseout=out(1)>1</div>
		<div class=off id=control2 onmouseover=hover(2) onclick=press(2,false) 
		onmouseout=out(2)>2</div>
		<div class=off id=control3 onmouseover=hover(3) onclick=press(3,false) 
		onmouseout=out(3)>3</div>
		<div class=off id=control4 onmouseover=hover(4) onclick=press(4,false) 
		onmouseout=out(4)>4</div>
		<div class="arrow r-a" onmouseover=highlightA(this); onclick=nextF(); 
		onmouseout=dehighlightA(this);></div>
	</div>
	<INPUT id=numFrame type=hidden value=4></INPUT>
	<a href="#" target="_blank"><INPUT id=images1 type=hidden value=images/01.jpg></INPUT></a>
	<a href="#" target="_blank"><INPUT id=images2 type=hidden value=images/02.jpg></INPUT> </a>
	<a href="#" target="_blank"><INPUT id=images3 type=hidden value=images/03.jpg></INPUT> 
	<a href="#" target="_blank"><INPUT id=images4 type=hidden value=images/04.jpg></INPUT> 
</div>
<script src="js/lanrenxixi.js" type=text/javascript></script>
</body>
</html>

JS代码(lanrenxixi.js):

var fadeDelay,slidetimer,scrolltimer,c;
	var autoPlay=false;
	var bgimages=[];
	init();
	play();
	function carousel(a){
	this.p=new pagination(a);
	this.s=new stage();
	this.selectedIndex=-1;
	this.busy=false}
function pagination(a){
	this.buttons=[a];
	var b=0;
	for(b=0;
	b<a;
	b++){
	this.buttons[b]=new pagebutton(b+1)}
}
function pagebutton(a){
	this.id="control"+a;
	this.elem=document.getElementById(this.id)}
function stage(){
	this.frames=[5];
	this.frames[0]=new frame(1,true,8);
	this.frames[1]=new frame(2,true,8);
	this.frames[2]=new frame(3,true,8);
	this.frames[3]=new frame(4,true,8);
	this.frames[4]=new frame(5,true,8)}
function frame(b,a,f){
	this.id="f"+b;
	this.elem=document.getElementById(this.id);
	this.activeOverlay=-1;
	this.imgLoaded=false;
	this.overlays=[f];
	var d=1;
	for(d;
	d<=f;
	d++){
	var e=new overlay(this.id,d);
	this.overlays[d-1]=e}
if(a){
	this.spots=[f];
	d=1;
	for(d;
	d<=f;
	d++){
	var g=new hotspot(this.id,d);
	this.spots[d-1]=g}
}
}
function hotspot(a,b){
	this.id=a+"h"+b;
	this.elem=document.getElementById(this.id)}
function overlay(a,b){
	this.id=a+"t"+b;
	this.elem=document.getElementById(this.id)}
function init(){
	var a=document.getElementById("numFrame").value;
	var b="images";
	for(i=0;
	i<a;
	i++){
	bgimages[i]=document.getElementById(b+(i+1)).value}
c=new carousel(a);
	hit(1);
	c.s.frames[0].imgLoaded=true;
	c.selectedIndex=1}
function play(){
	if(autoPlay){
	return}
autoPlay=true;
	scrolltimer=setInterval(goToNextFrame,8000)}
function pause(){
	if(!autoPlay){
	return}
autoPlay=false;
	if(scrolltimer==undefined||scrolltimer==null){
	return}
clearInterval(scrolltimer);
	scrolltimer=null}
function restart(){
	pause();
	play()}
function goToNextFrame(){
	if(autoPlay){
	var a=nextFrame();
	press(a,true)}
}
function nextFrame(){
	if(c.selectedIndex==bgimages.length){
	return 1}
else{
	if(c.selectedIndex<bgimages.length){
	return((c.selectedIndex*1)+1)}
else{
	return 1}
}
}
function prevFrame(){
	if(c.selectedIndex>1){
	return((c.selectedIndex*1)-1)}
else{
	return document.getElementById("numFrame").value}
}
function loadImg(b){
	if(b!=-1){
	var a=c.s.frames[b-1];
	if(a.imgLoaded){
	return}
}
elem=document.getElementById(c.s.frames[b-1].id);
	elem.style.backgroundImage="url("+bgimages[b-1]+")";
	c.s.frames[b-1].imgLoaded=true}
function hover(a){
	if(a==-1||a==c.selectedIndex){
	return}
loadImg(a);
	c.p.buttons[a-1].elem.className="on"}
function unhit(a){
	if(a==-1){
	return}
c.p.buttons[a-1].elem.className="off"}
function out(a){
	if(a==-1||a==c.selectedIndex){
	return}
c.p.buttons[a-1].elem.className="off"}
function hit(a){
	if(a==-1||a==c.selectedIndex){
	return}
c.p.buttons[a-1].elem.className="selected"}
function active(){
	if(c.selectedIndex==-1){
	return}
pause();
	updateFrame(true)}
function deactive(){
	if(c.selectedIndex==-1){
	return}
var a=c.s.frames[c.selectedIndex-1];
	if(a==null){
	return}
updateFrame(false);
	restart()}
function updateFrame(d){
	var b=c.s.frames[c.selectedIndex-1];
	if(b==null){
	return}
if(b.spots==null){
	return}
var a=b.spots.length;
	if(!d){
	clearOverlay(b)}
for(a;
	a>0;
	a--){
}
}
function clearOverlay(a){
	if(a.activeOverlay!=-1){
	var b=a.overlays[a.activeOverlay-1];
	hideOverlay(b.id);
	a.activeOverlay=-1}
}
function fadeOverlay(a){
	fadeDelay=setTimeout("hideOverlay('"+a+"')",700);
	hideOtherVisibleOverlays(a)}
function hideOtherVisibleOverlays(b){
	var e=b.substring(0,2);
	var d=getElementsByClassName(document.getElementById(e),"a","overlay");
	for(var a=0;
	a<d.length;
	a++){
	if(d[a].style.display=="block"&&d[a].id!=b){
	d[a].style.display="none"}
}
}
function getElementsByClassName(b,g,a){
	var f=(g=="*"&&b.all)?b.all:b.getElementsByTagName(g);
	var j=new Array();
	a=a.replace(/\-/g,"\\-");
	var h=new RegExp("(^|\\s)"+a+"(\\s|$)");
	var e;
	for(var d=0;
	d<f.length;
	d++){
	e=f[d];
	if(h.test(e.className)){
	j.push(e)}
}
return(j)}
function hideOverlay(a){
	elem=document.getElementById(a);
	hide(elem);
	c.s.frames[c.selectedIndex-1].activeOverlay=-1}
function showOverlay(b,d){
	hideOtherVisibleOverlays(b);
	if(fadeDelay!=undefined){
	clearTimeout(fadeDelay);
	fadeDelay=undefined}
if(c.s.frames[c.selectedIndex-1].activeOverlay==d){
	return}
clearOverlay(c.s.frames[c.selectedIndex-1]);
	var a=document.getElementById(b);
	show(a);
	c.s.frames[c.selectedIndex-1].activeOverlay=d}
function changeOpac(b,d){
	var a=document.getElementById(d).style;
	a.opacity=(b/100);
	a.MozOpacity=(b/100);
	a.KhtmlOpacity=(b/100);
	a.filter="alpha(opacity="+b+")"}
function showLegal(){
	elem=document.getElementById("legal");
	show(elem)}
function hideLegal(){
	elem=document.getElementById("legal");
	hide(elem)}
function hide(a){
	if(a==null||a.style.display=="none"){
	return}
a.style.display="none"}
function show(a){
	if(a==null||a.style.display=="block"){
	return}
a.style.display="block"}
function press(b,a){
	if(c.busy||b==c.selectedIndex){
	return}
loadImg(b);
	deactive();
	hit(b);
	unhit(c.selectedIndex);
	slide(b,a);
	c.selectedIndex=b}
function slide(b,a){
	c.busy=true;
	if(slidetimer!=undefined||slidetimer!=null){
	clearTimeout(slidetimer)}
(a||b>c.selectedIndex)?scrollRight(b,c.selectedIndex):scrollLeft(b,c.selectedIndex)}
function scrollRight(d,a){
	var b=document.getElementById("stage");
	b.style.left="0px";
	reposition(a,0);
	reposition(d,1);
	reIndex(d,a);
	scroll(0,-715)}
function scrollLeft(d,a){
	var b=document.getElementById("stage");
	b.style.left="-715px";
	reposition(d,0);
	reposition(a,1);
	reIndex(d,a);
	scroll(-715,0)}
function reIndex(e,b){
	var d=2;
	var a=c.s.frames.length;
	for(a;
	a>0;
	a--){
	if(a!=e&&a!=b){
	reposition(a,d++)}
}
}
function reposition(b,a){
	c.s.frames[b-1].elem.style.left=715*a+"px"}
function scroll(d,a){
	var b=document.getElementById("stage");
	next=d,slidetimer=0,interval=50,speed=40;
	if(d<a){
	next+=interval}
else{
	if(d>a){
	next-=interval}
}
if(next>0||(next<a&&d>a)||(next>a&&d<a)){
	next=next>0?0:a;
	b.style.left=next+"px";
	c.busy=false}
else{
	b.style.left=next+"px";
	slidetimer=setTimeout("scroll("+next+","+a+")",speed)}
}
function highlightA(a){
	if(a.className=="arrow r-a"){
	a.className="arrow r-h"}
if(a.className=="arrow l-a"){
	a.className="arrow l-h"}
}
function dehighlightA(a){
	if(a.className=="arrow r-h"){
	a.className="arrow r-a"}
else{
	if(a.className=="arrow l-h"){
	a.className="arrow l-a"}
}
}
function prevF(){
	if(c.busy||a==c.selectedIndex){
	return}
var a=prevFrame();
	loadImg(a);
	deactive();
	hit(a);
	unhit(c.selectedIndex);
	c.busy=true;
	if(slidetimer!=undefined||slidetimer!=null){
	clearTimeout(slidetimer)}
scrollLeft(a,c.selectedIndex);
	c.selectedIndex=a}
function nextF(){
	if(c.busy||a==c.selectedIndex){
	return}
var a=nextFrame();
	loadImg(a);
	deactive();
	hit(a);
	unhit(c.selectedIndex);
	c.busy=true;
	if(slidetimer!=undefined||slidetimer!=null){
	clearTimeout(slidetimer)}
scrollRight(a,c.selectedIndex);
	c.selectedIndex=a}
;

CSS代码(css.css):

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
p{line-height:24px;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;}
table{border-collapse:collapse;border-spacing:0;}
#carousel UL{LIST-STYLE:none none outside}
#carousel .frame{WIDTH:515px;POSITION:relative;HEIGHT:310px;overflow:hidden;margin:30px auto 0 auto;}
#carousel .frames{WIDTH:2920px;POSITION:relative;HEIGHT:310px}
#carousel .frame-2{LEFT:715px;OVERFLOW:hidden;WIDTH:715px;POSITION:absolute;HEIGHT:310px}
#carousel .frame-3{LEFT:1460px;OVERFLOW:hidden;WIDTH:715px;POSITION:absolute;HEIGHT:310px}
#carousel .frame-4{LEFT:2190px;OVERFLOW:hidden;WIDTH:715px;POSITION:absolute;HEIGHT:310px}
#carousel .frame-5{LEFT:2920px;OVERFLOW:hidden;WIDTH:715px;POSITION:absolute;HEIGHT:310px}
#carousel .controls{DISPLAY:block;WIDTH:105px;CURSOR:hand;BOTTOM:0px;PADDING-TOP:2px;margin:0 auto;HEIGHT:20px}
#carousel .overlay{BORDER-RIGHT:#ededed 5px solid;BORDER-TOP:#ededed 5px solid;DISPLAY:none;FILTER:alpha(opacity=90);BORDER-LEFT:#ededed 5px solid;WIDTH:188px;CURSOR:hand;BORDER-BOTTOM:#ededed 5px solid;POSITION:absolute;HEIGHT:118px;BACKGROUND-COLOR:#fff;opacity:.9}
#carousel .two-overlay{HEIGHT:141px}
#carousel .olines{HEIGHT:122px}
#carousel .two-olines{HEIGHT:142px}
#carousel .sdw{BORDER-RIGHT:#666 2px solid;BORDER-TOP:#666 0px solid;DISPLAY:block;LEFT:-5px;BORDER-LEFT:#666 0px solid;WIDTH:196px;BORDER-BOTTOM:#666 2px solid;POSITION:absolute;TOP:-5px;HEIGHT:127px;opacity:.8}
#carousel .two-sdw{HEIGHT:151px}
#carousel .slines{HEIGHT:126px}
#carousel .two-slines{HEIGHT:149px}
#carousel .details{PADDING-RIGHT:17px;DISPLAY:block;PADDING-LEFT:17px;PADDING-BOTTOM:17px;FONT:12px arial;WIDTH:163px;PADDING-TOP:17px;HEIGHT:93px}
#carousel .dlines{HEIGHT:97px}
#carousel .two-dlines{HEIGHT:137px}
#carousel .title{PADDING-BOTTOM:8px;FONT:bold 15px "Trebuchet MS";BORDER-BOTTOM:#ccc 1px solid}
#carousel .priceMsg{PADDING-BOTTOM:1px;COLOR:#333;PADDING-TOP:4px}
#carousel .price{FONT:bold 15px arial}
#carousel .legal{FONT:11px arial;COLOR:#666}
#carousel .terms{FLOAT:right;WIDTH:80px}
#carousel .content{PADDING-RIGHT:10px;DISPLAY:none;PADDING-LEFT:10px;FILTER:alpha(opacity=80);PADDING-BOTTOM:5px;WIDTH:695px;PADDING-TOP:5px;POSITION:absolute;TOP:258px;BACKGROUND-COLOR:#fff;TEXT-ALIGN:justify;opacity:.8}
#carousel .double-des{PADDING-BOTTOM:12px}
#carousel .des{COLOR:#1161b7;PADDING-TOP:12px}
#carousel .selected{FLOAT:left;FONT:17px "trebuchet ms";MARGIN-LEFT:4px;WIDTH:16px;COLOR:#8f8f8f;POSITION:relative;HEIGHT:15px}
#carousel .off{FLOAT:left;FONT:17px "trebuchet ms";MARGIN-LEFT:4px;WIDTH:16px;COLOR:#dadada;POSITION:relative;HEIGHT:15px}
#carousel .on{FLOAT:left;FONT:17px "trebuchet ms";MARGIN-LEFT:4px;WIDTH:16px;COLOR:#1162b7;POSITION:relative;HEIGHT:15px}
#carousel .arrow{FLOAT:left;WIDTH:12px;HEIGHT:20px}
#carousel .l-a{BACKGROUND:url(../images/sprFilmstripArrows.gif) no-repeat 0px -22px}
#carousel .l-h{BACKGROUND:url(../images/sprFilmstripArrows.gif) no-repeat 0px -47px}
#carousel .r-a{BACKGROUND:url(../images/sprFilmstripArrows.gif) no-repeat 0px -97px}
#carousel .r-h{BACKGROUND:url(../images/sprFilmstripArrows.gif) no-repeat 0px -122px}

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