求大师，我做的是轮播图抖动的厉害，求解，代码如下：

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

<head>

<title>js实现3D图片逐张轮播幻灯片</title>

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:14px "微软雅黑";}

/* focus_Box */

#focus_Box{position:relative;width:1024px;height:100px;margin:20px auto;}

#focus_Box ul{position:relative;width:1024px;height:100px}

#focus_Box li{z-index:0;position:absolute; width:0px;height:0px;top:146px;cursor:pointer;left:377px;border-radius:4px;box-shadow:1px 1px 12px rgba(200, 200, 200, 1)}

#focus_Box li img{width:100%;height:100%;vertical-align:top}

#focus_Box li p{position:absolute;left:0;bottom:0px;width:100%;height:40px;line-height:40px;background:url(images/float-bg.png) repeat; text-align:center;color:#fff;}

#focus_Box li p span{display:inline-block;height:40px;overflow:hidden;}

#focus_Box .prev,#focus_Box .next{display:block;z-index:100;overflow:hidden;cursor:pointer;position:absolute;width:52px;height:52px;top:55px;}

#focus_Box .prev{background:url(images/btn.png) left bottom no-repeat;left:0px}

#focus_Box .next{background:url(images/btn.png) right bottom no-repeat;right:0px}

#focus_Box .prev:hover{background-position:left top;}

#focus_Box .next:hover{background-position:right top;}

</style>

// JavaScript Document

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.prev = this.wrap.getElementsByTagName("span")[0];

this.next = this.wrap.getElementsByTagName("span")[1];

this.timer = 1000;

this.aSort = [];

this.iCenter = 2;

this._doPrev = function () {return _this.doPrev.apply(_this)};

this._doNext = function () {return _this.doNext.apply(_this)};

this.options = [

{width:341, height:100, top:40, left:0, zIndex:1},

{width:410, height:120, top:30, left:130, zIndex:2},

{width:512, height:150, top:10, left:260, zIndex:3},

{width:410, height:120, top:30, left:490, zIndex:2},

{width:341, height:100, top:40, left:681, zIndex:1},

];

for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[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.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());

this.setUp()

doImgClick : function ()

{

var _this = this;

for (var i = 0; i < this.aSort.length; i++)

{

this.aSort[i].onmouseover = function ()

{

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()

}

setUp : function ()

{

var _this = this;

var i = 0;

for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);

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].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", 100)

this.aSort[i].onmouseout = function ()

{

_this.doMove(this.getElementsByTagName("img")[0], {opacity:100})

};

this.aSort[i].onmouseout();

}

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)

}

};

window.onload = function ()

{

new ZoomPic("focus_Box");

};

</script>

</head>

<body>

<ul>

<li>

<p>

<span>首届丝绸之路（敦煌）国际文化博览会</span>

</p>

</li>

<li>

<p>

<span>关注2016年甘肃高考</span>

</p>

</li>

<li>

<p>

<span>聚集甘肃农村天价彩礼</span>

</p>

</li>

<li>

<p>

<span>做时代的弄潮儿——2016中国西部创客节</span>

</p>

</li>

<li>

<p>

<span>2016甘肃省项目观摩活动专题</span>

</p>

</li>

</ul>

</div>

</body>

</html>

慕姐2084050

浏览 1773回答 1

1回答

随时随地看视频慕课网APP

求大师，我做的是轮播图抖动的厉害，求解 ，代码如下：

1回答

求大师，我做的是轮播图抖动的厉害，求解，代码如下：