webapi_3 今天真真真全是大经典案例

这个项目一多起来了，还是分个序号比价好一点，你好我好大家好，然后关于这个标点符号的问题，我打字真的很不喜欢打标点符号，不是不好按，按个逗号其实也是顺便的事情，可能就是养成习惯了，就喜欢按个空格来分开，也不晓得你们看有标点和没得标点看起来有区别没得，如果有区别的话我就慢慢养成习惯打上标点吧！！！欧尔整点感叹号这些还是可以，我们今天书接上回由于是大项目所以用了另一种呈现的方法。

我们后这个章节后面的内容的项目基本都要以一个自己编写的缓冲动画的函数为基础，所以我先把这个函数贴上来

缓冲动画函数终极版

Document .box { position: absolute; top: 50px; width: 100px; height: 100px; background-color: skyblue; }

500 800 var box \= document.querySelector('div') var btns \= document.querySelectorAll('button') function animate(obj, target, callback) { clearInterval(obj.timer) obj.timer \= setInterval(function() { if (obj.offsetLeft \== target) { clearInterval(obj.timer) // callback必须写到结束定时器这里 if (callback) { callback() } } var step \= (target \- obj.offsetLeft) / 10 step \= step < 0 ? Math.floor(step) : Math.ceil(step) obj.style.left \= obj.offsetLeft + step + 'px' }, 15) } btns\[0\].onclick \= function() { animate(box, 500) } btns\[1\].onclick \= function() { animate(box, 800, function() { box.style.backgroundColor \= 'red' }) }

来了一个十分十分经典的案例，轮播图，纯手打还是要点逻辑的

我后面给她直接单领出来单独放在了一个html里面

Document \* { margin: 0; padding: 0; } ol, ul { list-style: none; } a { text-decoration: none; } .banner { position: relative; width: 721px; height: 455px; margin: 100px auto; overflow: hidden; } .banner >a { display: none; position: absolute; width: 40px; height: 40px; background-color: rgba(0, 25, 0, .5); font-size: 20px; color: white; text-align: center; line-height: 40px; z-index: 1; cursor: pointer; } .banner a:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); } .banner a:nth-child(1) { top: 50%; left: 0; transform: translateY(-50%); } .banner ol { position: absolute; bottom: 30px; left: 40px; color: white; } ol li { float: left; width: 8px; height: 8px; margin-left: 5px; border: 2px solid white; border-radius: 50%; cursor: pointer; } .current { background-color: #fff; } ul { position: absolute; left: 0; top: 0; width: 500%; } ul li { float: left; }