JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

摘要：最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下：先展示下效果把：index.html页面展示代码复制代码代...

最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下：

先展示下效果把：

index.html 页面展示代码

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</script>

</head>

<body>

<UL>

<DIV >

<P>小乔，三国时期的主要女性人物之一。在三国时归属吴国，国色流离、资貌绝伦，是当时有名的东吴美女。</P></DIV></LI>

<DIV>

<P>潘安，西晋文学家，本名潘岳。中国古代最著名的美男子之首、"金谷二十四友"之首。</P></DIV></LI>

<DIV>

<P>朱元璋，明王朝的开国皇帝，建立了全国统一的封建政权。</P></DIV></LI>

<DIV >

<P>吕雉，西汉开国皇帝高祖刘邦的原配夫人，中国历史上第一位掌权的女性统治者。</P></DIV></LI>

<DIV >

<P>诸葛亮，蜀汉丞相，三国时期杰出的政治家、战略家、发明家、军事家。</P></DIV></LI>

</UL>

<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}