极客观点
项目管理
HarmonyOS
<!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实现3D图片逐张轮播幻灯片</title>
<style type="text/css">
*{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>
<script type="text/javascript">
// 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>
<div id="focus_Box">
<span class="prev"> </span>
<span class="next"> </span>
<ul>
<li>
<a href="http://gansu.gansudaily.com.cn/system/2016/04/29/016032781.shtml"><img alt="首届丝绸之路(敦煌)国际文化博览会" src="images/1.png.png" width="341" height="100" /></a>
<p>
<span>首届丝绸之路（敦煌）国际文化博览会</span>
</p>
</li>
<li>
<a href="http://edu.gansudaily.com.cn/system/2016/04/11/015996091.shtml"><img alt="关注2016年甘肃高考" src="images/5.png.png" width="341" height="100"/></a>
<p>
<span>关注2016年甘肃高考</span>
</p>
</li>
<li>
<a href="http://topic.gansudaily.com.cn/system/2016/04/30/016035063.shtml"><img alt="聚集甘肃农村天价彩礼" src="images/2.png.png" width="341" height="100"/></a>
<p>
<span>聚集甘肃农村天价彩礼</span>
</p>
</li>
<li>
<a href="http://gansu.gansudaily.com.cn/system/2016/07/06/016207491.shtml"><img alt="2016中国西部创客节" src="images/zhutu2.png" width="341" height="100"/></a>
<p>
<span>做时代的弄潮儿——2016中国西部创客节</span>
</p>
</li>
<li>
<a href="http://gansu.gansudaily.com.cn/system/2016/06/15/016148108.shtml"><img width="341" height="100" alt="2016甘肃省项目观摩活动专题" src="images/zhutu3.png" /></a>
<p>
<span>2016甘肃省项目观摩活动专题</span>
</p>
</li>
</ul>
</div>
</body>
</html>求大师，我做的是轮播图抖动的厉害，求解 ，代码如下：
新手上路，请多包涵
阅读 3.7k
新手上路，请多包涵
二狗来了，简单粗暴，就不讲为啥了，上代码
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] = Math.ceil(value) + "px";
break;
default:
oElement.style[attr] = Math.ceil(value);
break
}
}
},在css这个方法中，将value的值向上取整，这样图片才能勉强维持不抖动这样子~~（上面是二狗自己的代码）
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}13 回答13.1k 阅读
Next.js做纯前端是否可行？
最近在学习Next.js存在一个疑问，如果只需要做前端界面的渲染和交互后端逻辑都用java来做，是否还需要使用Next.js，还是说直接使用React+Tailwind css更好7 回答2.3k 阅读
如何实现一个深拷贝函数？
在项目开发中，如何实现一个深拷贝函数？3 回答1.4k 阅读✓ 已解决
怎么获取动态弹出对话框的模拟单击？
我在用js实现自动化刷课脚本的时候，要处理一个“继续学习”弹出对话框，才能播放。使用document.queryselctor('.continue')获取不到，好像也没有click事件;6 回答1.5k 阅读✓ 已解决
git提交记录问题？
"git add .“添加了所有文件.这样导致了项目里每一行代码的修改记录都变成了这次的提交备注"update gitignore"。后续其他同事也提交了几次记录。想着回滚回这次修改以前的，再让同事们重新提交自己的修改。但同事们已经pull过代码，可能也区分不出来了。 有什么方法删除掉gitignore的这次提交，并保留同事们后续的提交？2 回答1.5k 阅读✓ 已解决
为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？
结果为空值,想问一下这两个有什么不一样吗,感觉都是先获取到obj.test,而且obj.test是用括号包起来的,然后调用一下,但是两个结果的obj.test调用的结果却是不一眼的,第一个this是obj,第二个是window感觉.3 回答1.5k 阅读✓ 已解决
问一个鼠标滚动事件，这种是怎么实现的？
我看到了deepseek官网的这个按钮，鼠标放上去，还是可以滚动页面，这个是怎么做的？我研究了一下deepseek官网的支持，而通义千问的却不可以。2 回答1.7k 阅读✓ 已解决
我只能说你这个是旋转木马！！！而且我并没有看见抖动。。。 但是在这里建议加个节流阀会好一点