JS投影片可循環播放可平滑旋轉帶滾動導航(自寫)_javascript技巧

最近在幫別人改一些東西,在網上找了好久,但是沒有相同的,自己改了下,拿出來分享下：
先展示下效果把：
 
index.html頁面展示代碼

複製代碼 代碼如下:

BR>
BR>
BR>

prev

next

• 
  
  
  

  小喬，三國時期的主要女性人物之一。在三國時歸屬吳國，國色流離失所、資貌絕倫，是當時有名的東吳美女。



• 
  
  
  

  潘安，西晉文學家，本名潘岳。中國古代最著名的美男子之首、"金谷二十四友"之首。



• 
  
  
  

  朱元璋，明王朝的開國皇帝，建立了全國統一的封建政權。



• 
  
  
  

  呂雉，西漢開國皇帝高祖劉邦的原配夫人，中國史上第一位掌權的女性統治者。



• 
  
  
  

  諸葛亮，蜀漢丞相，三國時期傑出的政治家、戰略家、發明家、軍事家。

接下來是對應的JS檔案內容:

複製程式碼 程式碼如下:

//var tempi=0;
function ZoomPic ()
{
this.initialize.apply(this,arguments);
}
ZoomPic.prototype =
{
初始化：函數（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 = [
{寬度：50，高度：212，上方：55，左側：0，zIndex：1}，
{寬度：90，：252，上方：35，左邊:50, zIndex:2},
{寬度:400, 高度:292, 頂部:10, 左邊:140, zIndex:3},
{寬度:90, 高度:252, 頂部: 35, 左邊:540, zIndex:2},
{寬度:50, 高度:212, 上方:55, 左邊:630, zIndex:1}
];
for (var i = 0; i for (var i = 0; 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 =這個；
for (var i = 0; i {
this.aSort[i].onclick = function ()
{ //alert(this.指數);
if (this.index > _this.iCenter)
{
for (var i = 0; i _this.setUp()
}
}
}
},dospansClick: function(){
var _this = this;
for (var i = 0; i {
this.aSpan[i].onclick = function ( )
{
//alert(這個.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.setUp()
//alert(this.id '...' cruuNum);
if(this.id-cruuNum>0){
for (var i = 0;我 _this.setUp()
}else{
//if(cruuNum==5){
//if(this.id-cruuNum>0){
for (var i = 0; i _this.setUp();
//}

//}
}
// else{
// for (var i = 0; i // _this.setUp()
//
// }




// }
// else if(this.id // {
// for (var i = 0; i // _this.setUp()
// }

// for (var i = 0; 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()
// 休息；
// }
// }

}
}
},
setUp : function ()
{
var _this = this;
var i = 0;
for (i = 0; i for (i = 0; i {
this.aSort[i].index = i;
//控制浮動層
if (i {

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]，{不透明度：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], "寬度", 0);
this.css(this.aSort[i], "高度", 0);
this.css(this.aSort[i], "top", 37);
this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)
}
if (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;tif(t==0){
if(ttSe==5){
numbuts[t ].className ='numbutLeftCen';
} 否則
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));
// }
// }
}
//速度 ;
this.aSort[i].onmouseover = this.aSort[i].onmouseout = null
}
}
},addEvent : function (oElement, sEventType, fnHandler)
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
> oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" sEventType, fnHandler)
},
css : function (oElement, attr, value)
{
{
ifararvalue)
{
ifararguments ) .length == 2)
{
回傳oElement.currentStyle ？ oElement.currentStyle[attr] : getCompulatedStyle(oElement, null)[attr]
}
else if ( 3)
{
switch (attr)
{
案例「寬度」：
案例「高度」：
案例「上」：
案例「左」：
案例「底部」：
oElement.style[attr] = value "像素";
休息；
案例"opacity" :
oElement.style.filter = "alpha(opacity=" value ")";
oElement.style.opacity = Value / 100;
休息；
值預設：
oElement.style[attr] = value; >break
}
}
},
doMove : function (oElement, oAttr, fnCallBack)
{
var _this = this
clearInterval(oElement.timer);
oElementInterval(tiunc連接.timer);
oElement. ()
{
var bStop = true;
for (oAttr 中的var 屬性)
{
var iCur = parseFloat(_this.css (o元素, 屬性));
屬性==「不透明度」&&(iCur = parseInt(iCur.toFixed(2) * 100));
var iSpeed = (oAttr[屬性] - iCur) / 5; 🎜>i 速度 = i 速度 > 0 ？ Math.ceil(iSpeed) : Math.floor(iSpeed);

if (iCur != oAttr[屬性])
{

bStop = false;
_this.css(oElement, property, iCur iSpeed)
}

} if (bStop) { clearInterval(oElement.timer) fnCallBack && fnCallBack. apply(_this, 參數) } }, 30)

},addClick:function (num){ //alert(num); // if (this.index > _this.iCenter) // { // for (var i = 0; i // _this.setUp() // } } }; window.onload = function () { new ZoomPic("box"); }； 函數 tt(){ //alert(1); } OK，最後加上一些樣式上的東西，就可以跑起來了；複製程式碼程式碼如下：

正文{
邊距：0px；內邊距：0px;
}
div {
邊距：0px;內邊距：0px；
}
ul {
邊距：0px;內邊距：0px;
}
li {
邊距：0px;內邊距：0px;
}
h4 {
邊距：0px;內邊距：0px;
}
p {
邊距：0px；內邊距：0px;
}
body {
無重複50% 0px rgb(0, 0, 0);字體：12px/1.8 arial；顏色: RGB(255, 255, 255);字體大小調整：無；字體拉伸：正常；
}
a {
背景：rgb(102, 102, 102);內邊距：2px 5px;顏色: RGB(255, 255, 255); 文字裝飾：無；
}
a:懸停{
背景：rgb(255, 153, 0);
}
#box {
邊距：1px 自動0px;寬度：680px；高度：320像素；位置：相對；
}
#box ul {
寬度：680px；高度：320像素；位置：相對；
}
#box li {
背景：rgb(0, 0, 0);清單樣式：無；邊框半徑：3px；邊框:0px 實心rgb(0, 0, 0);左：377 像素；上：146 像素；寬度：0 像素；高度：0 像素； ； z 索引：0；遊標：指標；
}
#box li div {
背景：rgb(0, 0, 0);寬度：100%；高度：40px；底部：-100px；位置：絕對；不透明度：0.7;
}
#box li div h4 {
字體：12px/24px arial;邊距：0px 10px；邊框底部顏色: rgb(51, 51, 51) ;邊框底部寬度：1px；邊框底部樣式：實心；字體大小調整：無；字體拉伸：正常；
}
#box li div h4 span {
顏色：紅色；左邊距：10px ;
}
#box li div p {
邊距：5px 10px 0px;文字縮排：2em;
}
.numbutLeft{寬度：15px;高度：5px；背景顏色：#AFB7B6；浮動：向左；遊標：指標；}
.numbut{寬度：15px;高度：5px；背景顏色：#AFB7B6；浮動：向左；左邊距：5px；遊標：指標；}
.numbutCen{寬度：15px;高度：5px；背景顏色：#FF0000；浮動：向左；左邊距：5px；遊標：指標；}
.numbutLeftCen{寬度：15px;高度：5px；背景顏色：#FF0000；浮動：向左；遊標: 指標;}
.numbutdiv{高度: 10px;寬度: 100%;顏色: 紅色;邊距頂部: 0px;頂部填滿：0px}
.ndv{高度：10px;寬度：95px;邊距：0 自動}
#box .next {
背景位置：-39px 0px;右：-60px;
}
#copyright {
文字對齊：居中；頂部填充：10px；
}

OOOOOKKK了，奇特的效果就要出來了，還有一些不完美的地方，懶得去改了，有高手可以改改看，但是希望分享。
效果如下：