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" />
<title>js七屏百叶窗焦点图特效</title>
<LINK rel=stylesheet type=text/css href="css/style.css">
<SCRIPT type=text/javascript src="js/slider.js"></SCRIPT>
</head>

<body style="text-align:center">

<div id=center>
<div id=slider>
	<div id=apDiv1><IMG border=0 alt="" src="images/tt_logo.jpg" width=821 height=37></div>
	
	<div class=slide><A href="#" target=_blank><IMG class=diapo 
	border=0 src="images/01.jpg"></A> 
	<div class=text>标题</div></div>
	<div class=slide><A href="#" target=_blank><IMG class=diapo 
	border=0 src="images/02.jpg"></A> 
	<div class=text>标题</div></div>
	<div class=slide><A href="#" target=_blank><IMG class=diapo 
	border=0 src="images/03.jpg"></A> 
	<div class=text>标题</div></div>
	<div class=slide><A href="#" target=_blank><IMG class=diapo 
	border=0 src="images/04.jpg"></A> 
	<div class=text>标题</div></div>
	<div class=slide><A href="#" target=_blank><IMG class=diapo 
	border=0 src="images/05.jpg"></A> 
	<div class=text>标题</div></div>
	<div class=slide><A href="#" target=_blank><IMG class=diapo 
	border=0 src="images/06.jpg"></A> 
	<div class=text>标题</div></div>
</div>
</div>

<script type=text/javascript>
/* ==== start script ==== */
slider.init();
</script>
</body>
</html>

JS代码(slider.js):

/* ==== slider nameSpace ==== */
var slider = function(){
	/* ==== private methods ==== */
function getElementsByClass(object,tag,className){
	var o = object.getElementsByTagName(tag);
	for ( var i = 0,n = o.length,ret = [];
	i < n;
	i++){
	if (o[i].className == className) ret.push(o[i]);
}
if (ret.length == 1) ret = ret[0];
	return ret;
}
function setOpacity (obj,o){
	if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
	else obj.style.opacity = o / 100;
}
/* ==== Slider Constructor ==== */
function Slider(oCont,speed,iW,iH,oP){
	this.slides = [];
	this.over = false;
	this.S = this.S0 = speed;
	this.iW = iW;
	this.iH = iH;
	this.oP = oP;
	this.oc = document.getElementById(oCont);
	this.frm = getElementsByClass(this.oc,'div','slide');
	this.NF = this.frm.length;
	this.resize();
	for (var i = 0;
	i < this.NF;
	i++){
	this.slides[i] = new Slide(this,i);
}
this.oc.parent = this;
	this.view = this.slides[0];
	this.Z = this.mx;
	/* ==== on mouse out event ==== */
this.oc.onmouseout = function (){
	this.parent.mouseout();
	return false;
}
}
Slider.prototype ={
	/* ==== animation loop ==== */
run:function (){
	this.Z += this.over ? (this.mn - this.Z) * .5:(this.mx - this.Z) * .5;
	this.view.calc();
	var i = this.NF;
	while (i--) this.slides[i].move();
}
,/* ==== resize ==== */
resize:function (){
	this.wh = this.oc.clientWidth;
	this.ht = this.oc.clientHeight;
	this.wr = this.wh * this.iW;
	this.r = this.ht / this.wr;
	this.mx = this.wh / this.NF;
	this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
}
,/* ==== rest ==== */
mouseout:function (){
	this.over = false;
	setOpacity(this.view.img,this.oP);
}
}
/* ==== Slide Constructor ==== */
Slide = function (parent,N){
	this.parent = parent;
	this.N = N;
	this.x0 = this.x1 = N * parent.mx;
	this.v = 0;
	this.loaded = false;
	this.cpt = 0;
	this.start = new Date();
	this.obj = parent.frm[N];
	this.txt = getElementsByClass(this.obj,'div','text');
	this.img = getElementsByClass(this.obj,'img','diapo');
	this.bkg = document.createElement('div');
	this.bkg.className = 'backgroundText';
	this.obj.insertBefore(this.bkg,this.txt);
	if (N == 0) this.obj.style.borderLeft = 'none';
	this.obj.style.left = Math.floor(this.x0) + 'px';
	setOpacity(this.img,parent.oP);
	/* ==== mouse events ==== */
this.obj.parent = this;
	this.obj.onmouseover = function(){
	this.parent.over();
	return false;
}
}
Slide.prototype ={
	/* ==== target positions ==== */
calc:function(){
	var that = this.parent;
	// left slidesfor (var i = 0;
	i <= this.N;
	i++){
	that.slides[i].x1 = i * that.Z;
}
// right slidesfor (var i = this.N + 1;
	i < that.NF;
	i++){
	that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
}
}
,/* ==== HTML animation:move slides ==== */
move:function(){
	var that = this.parent;
	var s = (this.x1 - this.x0) / that.S;
	/* ==== lateral slide ==== */
if (this.N && Math.abs(s) > .5){
	this.obj.style.left = Math.floor(this.x0 += s) + 'px';
}
/* ==== vertical text ==== */
var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0:that.wh - this.x0;
	if (Math.abs(v - this.v) > .5){
	this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
	this.v = v;
	this.cpt++;
}
else{
	if (!this.pro){
	/* ==== adjust speed ==== */
this.pro = true;
	var tps = new Date() - this.start;
	if(this.cpt > 1){
	that.S = Math.max(2,(28 / (tps / this.cpt)) * that.S0);
}
}
}
if (!this.loaded){
	if (this.img.complete){
	this.img.style.visibility = 'visible';
	this.loaded = true;
}
}
}
,/* ==== light ==== */
over:function (){
	this.parent.resize();
	this.parent.over = true;
	setOpacity(this.parent.view.img,this.parent.oP);
	this.parent.view = this;
	this.start = new Date();
	this.cpt = 0;
	this.pro = false;
	this.calc();
	setOpacity(this.img,100);
}
}
/* ==== public method - script initialization ==== */
return{
	init:function(){
	// create instances of sliders here// parameters:HTMLcontainer name,speed (2 fast - 20 slow),Horizontal ratio,vertical text ratio,opacitythis.s1 = new Slider("slider",12,1.84/3,1/3.2,70);
	setInterval("slider.s1.run();
	",16);
}
}
}
();

CSS代码(style.css):

HTML{OVERFLOW:hidden;font-size:12px}
BODY{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;WIDTH:100%;PADDING-RIGHT:0px;BACKGROUND:#121212;HEIGHT:100%;COLOR:#fff;PADDING-TOP:0px}
#center{Z-INDEX:2;POSITION:absolute;TOP:50%;LEFT:50%}
#slider{Z-INDEX:1;BORDER-BOTTOM:#000 20px solid;POSITION:absolute;BORDER-LEFT:#000 20px solid;WIDTH:820px;BACKGROUND:#000;HEIGHT:403px;OVERFLOW:hidden;BORDER-TOP:#000 20px solid;TOP:-186px;BORDER-RIGHT:#000 20px solid;LEFT:-430px}
#slider .slide{Z-INDEX:10;POSITION:absolute;BORDER-LEFT:#000 1px solid;WIDTH:500px;BACKGROUND:#000;HEIGHT:333px;OVERFLOW:hidden;TOP:43px;CURSOR:default;LEFT:22px;text-align:left;}
#slider .title{COLOR:#f80;FONT-SIZE:1.2em;FONT-WEIGHT:bold;MARGIN-RIGHT:1.5em;TEXT-DECORATION:none}
#slider .text{POSITION:absolute;TEXT-ALIGN:justify;WIDTH:470px;DISPLAY:none;FONT-FAMILY:verdana,arial,Helvetica,sans-serif;COLOR:#fff;FONT-SIZE:0.9em;TOP:100%;LEFT:10px}
#slider .diapo{POSITION:absolute;FILTER:alpha(opacity=100);VISIBILITY:visible;opacity:1}
#apDiv1{Z-INDEX:1;POSITION:absolute;BACKGROUND-COLOR:#000000;WIDTH:820px;HEIGHT:30px;OVERFLOW:hidden;TOP:0px;LEFT:0px}
#apDiv2{Z-INDEX:3;POSITION:absolute;WIDTH:860px;HEIGHT:35px;OVERFLOW:hidden;TOP:216px;LEFT:-429px}
.pagenext{POSITION:relative;WIDTH:820px;HEIGHT:37px}
A.pn:link{Z-INDEX:4;POSITION:absolute;WIDTH:47px;FONT:12px "����";COLOR:#666;TOP:15px;RIGHT:33px;TEXT-DECORATION:none}
A.pn:visited{Z-INDEX:4;POSITION:absolute;WIDTH:47px;FONT:12px "����";COLOR:#666;TOP:15px;RIGHT:33px;TEXT-DECORATION:none}
A.pn:hover{COLOR:#fff}
A.pn:active{COLOR:#fff}
/*����������ʽ*/
A{FONT-SIZE:12px;COLOR:#000;}
A:link{COLOR:#fff;TEXT-DECORATION:none;}
A:visited{COLOR:#fff;TEXT-DECORATION:none;}
A:hover{COLOR:#fff;TEXT-DECORATION:underline;}
A:active{COLOR:#fff;TEXT-DECORATION:none;}

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