轮播

向上轮播图，新闻 ，公告轮播，记录一下，以后方便用 < html > < head > < title > vue < / title > < meta charset = "utf-8" > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > < style > * { list - style : none ; padding : 0 px ; margin : 0 px ; } #hot - box { height : 30 px ; border : 1 px solid #ccc ; overflow : hidden ; width : 200 px ; margin : 50 px auto ; } #hot - box li { line - height : 30 px ; padding : 0 10 px ; height : 30 px ; } < / style > < / head > < body > < div id = "hot-box" > < ul id = "hot-content01" > < li > 1111 < / li > < li > 2222 < / li > < li > 3333 < / li > < li > 4444 < / li > <

思路：首先要知道需求，先从简单的地方入手，然后一步一步的去改进，但是首先要想好做每一步目的，原因，不要只知道代码是这么写的，而不去想为什么要这么做。 动画函数封装 function animate(obj, target, callback) { //做动画的对象，需要移动的距离，回调函数 clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - obj.offsetLeft) / 10;//缓动动画实现原理 step = step > 0 ? Math.ceil(step) : Math.floor(step); //取整的问题，否者后面会有瑕疵 if(obj.offsetLeft == target){ //判断时候到达位置 clearInterval(obj.timer); //清除定时器 obj.timer = null; //将该对象的定时器设置为空，释放内存 callback && callback(); //如果有回调函数就调用回调函数 } obj.style.left = obj.offsetLeft + step + 'px'; //移动 }, 15); } 1，首先获取几个等会肯定要用到的元素； var arrowLeft = document

** 透明度变化的轮播图 ** 一、简单介绍 轮播图是前端学习中常用的案例，通过各式各样的轮播图我们可以对JS的基础知识进行实践 下面是我在学习中所写的透明度轮播图 实际中获取更多炫酷效果的轮播图可以访问 Swiper中文网 二、基本模块介绍 1.HTML部分 （1）.先写一个div作为轮播图板块的主体 （2）.写一个列表来存n张图 （3）.写两个按钮来控制前进和后退（为了更好的样式，我用两个div添加click事件来代替） （4）.图片下方的圆点序号 html代码 <div id="slider"> <ul id="list"> <li class="item"><img src="img/1.jpg"></li> <li class="item"><img src="img/2.jpg"></li> <li class="item"><img src="img/3.jpg"></li> <li class="item"><img src="img/4.jpg"></li> <li class="item"><img src="img/5.jpg"></li> </ul> <div id="left" class="button"><</div> <div id="right" class="button">></div> <ul id="pic"> <li class=