JS幻燈片可循環播放可平滑旋轉帶滾動導航(自寫)
編輯：關於JavaScript
最近在幫別人改一些東西,在網上找了好久,但是沒有相同的,自己改了下,拿出來分享下：
先展示下效果把：
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=utf-8" />
<title></title>
<LINK href="css/css.css" rel="stylesheet" type="text/css"> </LINK>
<SCRIPT language="JavaScript" src="js/16sucai.js"></SCRIPT>
<script type="text/javascript">
</script>
</head>
<body>
<DIV id="box">
<PRE class="prev" style="display: none;">prev</PRE>
<PRE class="next" style="display: none;">next</PRE>
<UL>
<LI><IMG name='1' src="images/main_right_p.jpg">
<DIV >
<P>小喬，三國時期的主要女性人物之一。在三國時歸屬吳國，國色流離、資貌絕倫，是當時有名的東吳美女。</P></DIV></LI>
<LI><IMG name='2' src="images/main_right_p.jpg">
<DIV>
<P>潘安，西晉文學家，本名潘岳。中國古代最著名的美男子之首、"金谷二十四友"之首。</P></DIV></LI>
<LI><IMG name='3' src="images/main_right_p.jpg">
<DIV>
<P>朱元璋，明王朝的開國皇帝，建立了全國統一的封建政權。</P></DIV></LI>
<LI><IMG name='4' src="images/main_right_p.jpg">
<DIV >
<P>呂雉，西漢開國皇帝高祖劉邦的原配夫人，中國歷史上第一位掌權的女性統治者。</P></DIV></LI>
<LI><IMG name='5' src="images/main_right_p.jpg">
<DIV >
<P>諸葛亮，蜀漢丞相，三國時期傑出的政治家、戰略家、發明家、軍事家。</P></DIV></LI>
</UL>
<div class='numbutdiv'>
<div class='ndv'>
<label name='numBut' id='0'></label>
<label name='numBut' id='1'></label>
<label name='numBut' id='2'></label>
<label name='numBut' id='3'></label>
<label name='numBut' id='4'></label>
</div>
</div>
</DIV>
</body>
</html>
接下來是對應的JS文件內容:
復制代碼 代碼如下:
//var tempi=0;
function ZoomPic ()
{
this.initialize.apply(this, arguments);
}
ZoomPic.prototype =
{
initialize : function (id)
{
var _this = this;
this.wrap = typeof id === "string" ? document.getElementById(id) : id;
this.oUl = this.wrap.getElementsByTagName("ul")[0];
this.aLi = this.wrap.getElementsByTagName("li");
this.spans = this.wrap.getElementsByTagName("label");
this.prev = this.wrap.getElementsByTagName("pre")[0];
this.next = this.wrap.getElementsByTagName("pre")[1];
this.timer = null;
this.aSort = [];
this.aSpan = [];
this.iCenter = 2;
this._doPrev = function () {return _this.doPrev.apply(_this)};
this._doNext = function () {return _this.doNext.apply(_this)};
this.options = [
{width:50, height:212, top:55, left:0, zIndex:1},
{width:90, height:252, top:35, left:50, zIndex:2},
{width:400, height:292, top:10, left:140, zIndex:3},
{width:90, height:252, top:35, left:540, zIndex:2},
{width:50, height:212, top:55, left:630, zIndex:1}
];
for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i];
for (var i = 0; i < this.spans.length; i++) this.aSpan[i] = this.spans[i];
this.aSort.unshift(this.aSort.pop());
this.setUp();
this.addEvent(this.prev, "click", this._doPrev);
this.addEvent(this.next, "click", this._doNext);
this.doImgClick();
this.dospansClick();
this.timer = setInterval(function ()
{
_this.doNext()
}, 3000);
this.wrap.onmouseover = function ()
{
clearInterval(_this.timer)
};
this.wrap.onmouseout = function ()
{
_this.timer = setInterval(function ()
{
_this.doNext()
}, 3000);
}
},
doPrev : function ()
{
this.aSort.unshift(this.aSort.pop());//刪除數組最後一項，並且返回數組 獲取最後一位
this.setUp()
},
doNext : function ()
{
this.aSort.push(this.aSort.shift());//刪除數組第一項，並且返回數組 刪除第一位，然後把第一位push到最後一個上面
this.setUp()
},
doImgClick : function ()
{
var _this = this;
for (var i = 0; i < this.aSort.length; i++)
{
this.aSort[i].onclick = function ()
{ //alert(this.index);
if (this.index > _this.iCenter)
{
for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
_this.setUp()
}
else if(this.index < _this.iCenter)
{
for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop());
_this.setUp()
}
}
}
},dospansClick:function(){
var _this = this;
for (var i = 0; i < this.aSpan.length; i++)
{
this.aSpan[i].onclick = function ()
{
//alert(this.id);
//alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name);//獲取到當前是第幾個在中間
var cruuNum=_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name;
// if (this.id > _this.iCenter)
// {
// for (var i = 0; i < this.id - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());//取
// _this.setUp()
//alert(this.id+'...'+cruuNum);
if(this.id-cruuNum>0){
for (var i = 0; i < this.id-cruuNum; i++) _this.aSort.push(_this.aSort.shift());//取
_this.setUp()
}else{
//if(cruuNum==5){
//if(this.id-cruuNum>0){
for (var i = 0; i < -(this.id-cruuNum); i++) _this.aSort.unshift(_this.aSort.pop());//取
_this.setUp();
//}
//}
}
// else{
// for (var i = 0; i < -(this.id-cruuNum); i++) _this.aSort.push(_this.aSort.shift());//取
// _this.setUp()
//
// }
// }
// else if(this.id < _this.iCenter)
// {
// for (var i = 0; i < _this.iCenter - this.id; i++) _this.aSort.unshift(_this.aSort.pop());
// _this.setUp()
// }
// for (var i = 0; i <5; i++){
// _this.aSort.push(_this.aSort.shift());//取第一個
// alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name+'aaa'+this.id);
// if(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name==(this.id+1)){
// _this.setUp()
// break;
// }
// }
}
}
},
setUp : function ()
{
var _this = this;
var i = 0;
for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);//gebytagui0
for (i = 0; i < this.aSort.length; i++)
{
this.aSort[i].index = i;
//控制浮動層
if (i < 5)
{
this.css(this.aSort[i], "display", "block");
this.doMove(this.aSort[i], this.options[i], function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
{
_this.aSort[_this.iCenter].onmouseover = function ()//鼠標放上去
{
_this.doMove(this.getElementsByTagName("div")[0], {bottom:0})
};
_this.aSort[_this.iCenter].onmouseout = function ()
{
_this.doMove(this.getElementsByTagName("div")[0], {bottom:-100})
}
})
})
});
}
else
{
this.css(this.aSort[i], "display", "none");
this.css(this.aSort[i], "width", 0);
this.css(this.aSort[i], "height", 0);
this.css(this.aSort[i], "top", 37);
this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)
}
if (i < this.iCenter || i > this.iCenter)//
{
this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 30)
this.aSort[i].onmouseover = function ()
{
_this.doMove(this.getElementsByTagName("img")[0], {opacity:100})
};
this.aSort[i].onmouseout = function ()
{
_this.doMove(this.getElementsByTagName("img")[0], {opacity:35})
};
this.aSort[i].onmouseout();
}
else
{
//中間 一直是2
//alert(this.aSort[i].text);//取消變亮事件
//alert(this.aSort[i].getElementsByTagName("img")[0].name);
//變換顏色
var ttSe=this.aSort[i].getElementsByTagName("img")[0].name;
var numbuts= document.getElementsByName('numBut');
//alert(numbuts.length);
for(var t=0;t<numbuts.length;t++){
if(t==0){
if(ttSe==5){
numbuts[t].className ='numbutLeftCen';
}else
numbuts[t].className ='numbutLeft';
}else if(t==ttSe){
numbuts[t].className ='numbutCen';
}else if(t==numbuts.length){
//alert(t);
numbuts[0].className ='numbutCen';
}else{
//全部修改class
numbuts[t].className='numbut';
}
//var aObj = document.getElementById("a的ID");
//添加事件
//alert(tempi);
// if(tempi==0){//alert(tempi);
// if (window.addEventListener) {//Mozilla系列
// numbuts[t].addEventListener('click', _this.addClick(t+1), false);
// } else if (window.attachEvent) {//IE
// numbuts[t].attachEvent('onclick', this.addClick(t+1));
// }
// }
}
//tempi++;
this.aSort[i].onmouseover = this.aSort[i].onmouseout = null
}
}
},addEvent : function (oElement, sEventType, fnHandler)
{
return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
},
css : function (oElement, attr, value)
{
if (arguments.length == 2)
{
return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]
}
else if (arguments.length == 3)
{
switch (attr)
{
case "width":
case "height":
case "top":
case "left":
case "bottom":
oElement.style[attr] = value + "px";
break;
case "opacity" :
oElement.style.filter = "alpha(opacity=" + value + ")";
oElement.style.opacity = value / 100;
break;
default :
oElement.style[attr] = value;
break
}
}
},
doMove : function (oElement, oAttr, fnCallBack)
{
var _this = this;
clearInterval(oElement.timer);
oElement.timer = setInterval(function ()
{
var bStop = true;
for (var property in oAttr)
{
var iCur = parseFloat(_this.css(oElement, property));
property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));
var iSpeed = (oAttr[property] - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != oAttr[property])
{
bStop = false;
_this.css(oElement, property, iCur + iSpeed)
}
}
if (bStop)
{
clearInterval(oElement.timer);
fnCallBack && fnCallBack.apply(_this, arguments)
}
}, 30)
},addClick:function (num){
//alert(num);
// if (this.index > _this.iCenter)
// {
// for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
// _this.setUp()
// }
}
};
window.onload = function ()
{
new ZoomPic("box");
};
function tt(){
//alert(1);
}
OK，最後加上一些樣式上的東西,就可以跑起來了；
復制代碼 代碼如下:
body {
margin: 0px; padding: 0px;
}
div {
margin: 0px; padding: 0px;
}
ul {
margin: 0px; padding: 0px;
}
li {
margin: 0px; padding: 0px;
}
h4 {
margin: 0px; padding: 0px;
}
p {
margin: 0px; padding: 0px;
}
body {
no-repeat 50% 0px rgb(0, 0, 0); font: 12px/1.8 arial; color: rgb(255, 255, 255); font-size-adjust: none; font-stretch: normal;
}
a {
background: rgb(102, 102, 102); padding: 2px 5px; color: rgb(255, 255, 255); text-decoration: none;
}
a:hover {
background: rgb(255, 153, 0);
}
#box {
margin: 1px auto 0px; width: 680px; height: 320px; position: relative;
}
#box ul {
width: 680px; height: 320px; position: relative;
}
#box li {
background: rgb(0, 0, 0); list-style: none; border-radius: 3px; border:0px solid rgb(0, 0, 0); left: 377px; top: 146px; width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 0; cursor: pointer;
}
#box li div {
background: rgb(0, 0, 0); width: 100%; height:40px; bottom: -100px; position: absolute; opacity: 0.7;
}
#box li div h4 {
font: 12px/24px arial; margin: 0px 10px; border-bottom-color: rgb(51, 51, 51); border-bottom-width: 1px; border-bottom-style: solid; font-size-adjust: none; font-stretch: normal;
}
#box li div h4 span {
color: red; margin-left: 10px;
}
#box li div p {
margin: 5px 10px 0px; text-indent: 2em;
}
.numbutLeft{width: 15px; height: 5px; background-color:#AFB7B6; float: left; cursor: pointer;}
.numbut{width: 15px; height: 5px; background-color:#AFB7B6; float: left; margin-left: 5px; cursor: pointer;}
.numbutCen{width: 15px; height: 5px; background-color:#FF0000; float: left; margin-left: 5px; cursor: pointer;}
.numbutLeftCen{width: 15px; height: 5px; background-color:#FF0000; float: left; cursor: pointer;}
.numbutdiv{height: 10px;width: 100%;color: red;margin-top: 0px; padding-top: 0px}
.ndv{height: 10px;width: 95px; margin: 0 auto}
#box .next {
background-position: -39px 0px; right: -60px;
}
#copyright {
text-align: center; padding-top: 10px;
}
OOOOOKKK 了,奇特的效果就要出來了 ,還有一些不完美的地方,懶得去改了,有高手可以改改看,但希望分享哦。
效果如下:
先展示下效果把：
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=utf-8" />
<title></title>
<LINK href="css/css.css" rel="stylesheet" type="text/css"> </LINK>
<SCRIPT language="JavaScript" src="js/16sucai.js"></SCRIPT>
<script type="text/javascript">
</script>
</head>
<body>
<DIV id="box">
<PRE class="prev" style="display: none;">prev</PRE>
<PRE class="next" style="display: none;">next</PRE>
<UL>
<LI><IMG name='1' src="images/main_right_p.jpg">
<DIV >
<P>小喬，三國時期的主要女性人物之一。在三國時歸屬吳國，國色流離、資貌絕倫，是當時有名的東吳美女。</P></DIV></LI>
<LI><IMG name='2' src="images/main_right_p.jpg">
<DIV>
<P>潘安，西晉文學家，本名潘岳。中國古代最著名的美男子之首、"金谷二十四友"之首。</P></DIV></LI>
<LI><IMG name='3' src="images/main_right_p.jpg">
<DIV>
<P>朱元璋，明王朝的開國皇帝，建立了全國統一的封建政權。</P></DIV></LI>
<LI><IMG name='4' src="images/main_right_p.jpg">
<DIV >
<P>呂雉，西漢開國皇帝高祖劉邦的原配夫人，中國歷史上第一位掌權的女性統治者。</P></DIV></LI>
<LI><IMG name='5' src="images/main_right_p.jpg">
<DIV >
<P>諸葛亮，蜀漢丞相，三國時期傑出的政治家、戰略家、發明家、軍事家。</P></DIV></LI>
</UL>
<div class='numbutdiv'>
<div class='ndv'>
<label name='numBut' id='0'></label>
<label name='numBut' id='1'></label>
<label name='numBut' id='2'></label>
<label name='numBut' id='3'></label>
<label name='numBut' id='4'></label>
</div>
</div>
</DIV>
</body>
</html>
接下來是對應的JS文件內容:
復制代碼 代碼如下:
//var tempi=0;
function ZoomPic ()
{
this.initialize.apply(this, arguments);
}
ZoomPic.prototype =
{
initialize : function (id)
{
var _this = this;
this.wrap = typeof id === "string" ? document.getElementById(id) : id;
this.oUl = this.wrap.getElementsByTagName("ul")[0];
this.aLi = this.wrap.getElementsByTagName("li");
this.spans = this.wrap.getElementsByTagName("label");
this.prev = this.wrap.getElementsByTagName("pre")[0];
this.next = this.wrap.getElementsByTagName("pre")[1];
this.timer = null;
this.aSort = [];
this.aSpan = [];
this.iCenter = 2;
this._doPrev = function () {return _this.doPrev.apply(_this)};
this._doNext = function () {return _this.doNext.apply(_this)};
this.options = [
{width:50, height:212, top:55, left:0, zIndex:1},
{width:90, height:252, top:35, left:50, zIndex:2},
{width:400, height:292, top:10, left:140, zIndex:3},
{width:90, height:252, top:35, left:540, zIndex:2},
{width:50, height:212, top:55, left:630, zIndex:1}
];
for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i];
for (var i = 0; i < this.spans.length; i++) this.aSpan[i] = this.spans[i];
this.aSort.unshift(this.aSort.pop());
this.setUp();
this.addEvent(this.prev, "click", this._doPrev);
this.addEvent(this.next, "click", this._doNext);
this.doImgClick();
this.dospansClick();
this.timer = setInterval(function ()
{
_this.doNext()
}, 3000);
this.wrap.onmouseover = function ()
{
clearInterval(_this.timer)
};
this.wrap.onmouseout = function ()
{
_this.timer = setInterval(function ()
{
_this.doNext()
}, 3000);
}
},
doPrev : function ()
{
this.aSort.unshift(this.aSort.pop());//刪除數組最後一項，並且返回數組 獲取最後一位
this.setUp()
},
doNext : function ()
{
this.aSort.push(this.aSort.shift());//刪除數組第一項，並且返回數組 刪除第一位，然後把第一位push到最後一個上面
this.setUp()
},
doImgClick : function ()
{
var _this = this;
for (var i = 0; i < this.aSort.length; i++)
{
this.aSort[i].onclick = function ()
{ //alert(this.index);
if (this.index > _this.iCenter)
{
for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
_this.setUp()
}
else if(this.index < _this.iCenter)
{
for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop());
_this.setUp()
}
}
}
},dospansClick:function(){
var _this = this;
for (var i = 0; i < this.aSpan.length; i++)
{
this.aSpan[i].onclick = function ()
{
//alert(this.id);
//alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name);//獲取到當前是第幾個在中間
var cruuNum=_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name;
// if (this.id > _this.iCenter)
// {
// for (var i = 0; i < this.id - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());//取
// _this.setUp()
//alert(this.id+'...'+cruuNum);
if(this.id-cruuNum>0){
for (var i = 0; i < this.id-cruuNum; i++) _this.aSort.push(_this.aSort.shift());//取
_this.setUp()
}else{
//if(cruuNum==5){
//if(this.id-cruuNum>0){
for (var i = 0; i < -(this.id-cruuNum); i++) _this.aSort.unshift(_this.aSort.pop());//取
_this.setUp();
//}
//}
}
// else{
// for (var i = 0; i < -(this.id-cruuNum); i++) _this.aSort.push(_this.aSort.shift());//取
// _this.setUp()
//
// }
// }
// else if(this.id < _this.iCenter)
// {
// for (var i = 0; i < _this.iCenter - this.id; i++) _this.aSort.unshift(_this.aSort.pop());
// _this.setUp()
// }
// for (var i = 0; i <5; i++){
// _this.aSort.push(_this.aSort.shift());//取第一個
// alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name+'aaa'+this.id);
// if(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name==(this.id+1)){
// _this.setUp()
// break;
// }
// }
}
}
},
setUp : function ()
{
var _this = this;
var i = 0;
for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);//gebytagui0
for (i = 0; i < this.aSort.length; i++)
{
this.aSort[i].index = i;
//控制浮動層
if (i < 5)
{
this.css(this.aSort[i], "display", "block");
this.doMove(this.aSort[i], this.options[i], function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
{
_this.aSort[_this.iCenter].onmouseover = function ()//鼠標放上去
{
_this.doMove(this.getElementsByTagName("div")[0], {bottom:0})
};
_this.aSort[_this.iCenter].onmouseout = function ()
{
_this.doMove(this.getElementsByTagName("div")[0], {bottom:-100})
}
})
})
});
}
else
{
this.css(this.aSort[i], "display", "none");
this.css(this.aSort[i], "width", 0);
this.css(this.aSort[i], "height", 0);
this.css(this.aSort[i], "top", 37);
this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)
}
if (i < this.iCenter || i > this.iCenter)//
{
this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 30)
this.aSort[i].onmouseover = function ()
{
_this.doMove(this.getElementsByTagName("img")[0], {opacity:100})
};
this.aSort[i].onmouseout = function ()
{
_this.doMove(this.getElementsByTagName("img")[0], {opacity:35})
};
this.aSort[i].onmouseout();
}
else
{
//中間 一直是2
//alert(this.aSort[i].text);//取消變亮事件
//alert(this.aSort[i].getElementsByTagName("img")[0].name);
//變換顏色
var ttSe=this.aSort[i].getElementsByTagName("img")[0].name;
var numbuts= document.getElementsByName('numBut');
//alert(numbuts.length);
for(var t=0;t<numbuts.length;t++){
if(t==0){
if(ttSe==5){
numbuts[t].className ='numbutLeftCen';
}else
numbuts[t].className ='numbutLeft';
}else if(t==ttSe){
numbuts[t].className ='numbutCen';
}else if(t==numbuts.length){
//alert(t);
numbuts[0].className ='numbutCen';
}else{
//全部修改class
numbuts[t].className='numbut';
}
//var aObj = document.getElementById("a的ID");
//添加事件
//alert(tempi);
// if(tempi==0){//alert(tempi);
// if (window.addEventListener) {//Mozilla系列
// numbuts[t].addEventListener('click', _this.addClick(t+1), false);
// } else if (window.attachEvent) {//IE
// numbuts[t].attachEvent('onclick', this.addClick(t+1));
// }
// }
}
//tempi++;
this.aSort[i].onmouseover = this.aSort[i].onmouseout = null
}
}
},addEvent : function (oElement, sEventType, fnHandler)
{
return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
},
css : function (oElement, attr, value)
{
if (arguments.length == 2)
{
return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]
}
else if (arguments.length == 3)
{
switch (attr)
{
case "width":
case "height":
case "top":
case "left":
case "bottom":
oElement.style[attr] = value + "px";
break;
case "opacity" :
oElement.style.filter = "alpha(opacity=" + value + ")";
oElement.style.opacity = value / 100;
break;
default :
oElement.style[attr] = value;
break
}
}
},
doMove : function (oElement, oAttr, fnCallBack)
{
var _this = this;
clearInterval(oElement.timer);
oElement.timer = setInterval(function ()
{
var bStop = true;
for (var property in oAttr)
{
var iCur = parseFloat(_this.css(oElement, property));
property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));
var iSpeed = (oAttr[property] - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != oAttr[property])
{
bStop = false;
_this.css(oElement, property, iCur + iSpeed)
}
}
if (bStop)
{
clearInterval(oElement.timer);
fnCallBack && fnCallBack.apply(_this, arguments)
}
}, 30)
},addClick:function (num){
//alert(num);
// if (this.index > _this.iCenter)
// {
// for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
// _this.setUp()
// }
}
};
window.onload = function ()
{
new ZoomPic("box");
};
function tt(){
//alert(1);
}
OK，最後加上一些樣式上的東西,就可以跑起來了；
復制代碼 代碼如下:
body {
margin: 0px; padding: 0px;
}
div {
margin: 0px; padding: 0px;
}
ul {
margin: 0px; padding: 0px;
}
li {
margin: 0px; padding: 0px;
}
h4 {
margin: 0px; padding: 0px;
}
p {
margin: 0px; padding: 0px;
}
body {
no-repeat 50% 0px rgb(0, 0, 0); font: 12px/1.8 arial; color: rgb(255, 255, 255); font-size-adjust: none; font-stretch: normal;
}
a {
background: rgb(102, 102, 102); padding: 2px 5px; color: rgb(255, 255, 255); text-decoration: none;
}
a:hover {
background: rgb(255, 153, 0);
}
#box {
margin: 1px auto 0px; width: 680px; height: 320px; position: relative;
}
#box ul {
width: 680px; height: 320px; position: relative;
}
#box li {
background: rgb(0, 0, 0); list-style: none; border-radius: 3px; border:0px solid rgb(0, 0, 0); left: 377px; top: 146px; width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 0; cursor: pointer;
}
#box li div {
background: rgb(0, 0, 0); width: 100%; height:40px; bottom: -100px; position: absolute; opacity: 0.7;
}
#box li div h4 {
font: 12px/24px arial; margin: 0px 10px; border-bottom-color: rgb(51, 51, 51); border-bottom-width: 1px; border-bottom-style: solid; font-size-adjust: none; font-stretch: normal;
}
#box li div h4 span {
color: red; margin-left: 10px;
}
#box li div p {
margin: 5px 10px 0px; text-indent: 2em;
}
.numbutLeft{width: 15px; height: 5px; background-color:#AFB7B6; float: left; cursor: pointer;}
.numbut{width: 15px; height: 5px; background-color:#AFB7B6; float: left; margin-left: 5px; cursor: pointer;}
.numbutCen{width: 15px; height: 5px; background-color:#FF0000; float: left; margin-left: 5px; cursor: pointer;}
.numbutLeftCen{width: 15px; height: 5px; background-color:#FF0000; float: left; cursor: pointer;}
.numbutdiv{height: 10px;width: 100%;color: red;margin-top: 0px; padding-top: 0px}
.ndv{height: 10px;width: 95px; margin: 0 auto}
#box .next {
background-position: -39px 0px; right: -60px;
}
#copyright {
text-align: center; padding-top: 10px;
}
OOOOOKKK 了,奇特的效果就要出來了 ,還有一些不完美的地方,懶得去改了,有高手可以改改看,但希望分享哦。
效果如下:
小編推薦
熱門推薦