声明：本文转载自https://my.oschina.net/sichunchen/blog/1544549，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
在这里，我为大家提供几种常用的动画效果，虽然没有什么特别，不是很炫酷，但很常见也很便捷。
轮播图在网页中运用较广，经常使用于头部banner，使用于电商网站中，例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型，这次就和大家说说其中的两款。轮播图的原理：点击上一张或下一张时，图片移动的距离为图片本身的宽度；点击图片下的原点导航时跳转到相应的图片位置。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 520px; } div.box{ width: 520px; height: 280px; overflow: hidden; margin: 100px auto; position: relative; } ul.img{ top: 0px; left: 0px; width: 1000%; position: absolute; } ul.img li{ float: left; list-style: none; } ul.circle{ left: 50%; bottom: 10px; margin-left: -75px; position: absolute; } ul.circle li{ width: 20px; height: 20px; float: left; color: #666; cursor: pointer; margin: 0px 5px; list-style: none; text-align: center; border-radius: 10px; background: #e4e4e4; font: normal 12px/20px "conslas"; } ul.arrow{ top: 50%; width: 100%; position: absolute; margin-bottom: -25px; } ul.arrow li{ width: 35px; height: 50px; color: #666; cursor: pointer; list-style: none; text-align: center; background: #ccc; font: 800 30px/50px "conslas"; } ul.arrow li.left{ float:left; } ul.arrow li.right{ float: right; } ul.circle li.current{ color:#fff; background: red; } </style> </head> <body> <div class="box"> <ul class="img"> <li><img src="img/p1.jpg" alt="" /></li> <li><img src="img/p2.jpg" alt="" /></li> <li><img src="img/p3.jpg" alt="" /></li> <li><img src="img/p4.jpg" alt="" /></li> <li><img src="img/p5.jpg" alt="" /></li> </ul> <ul class="circle"> </ul> <ul class="arrow"> <li class="left"><</li> <li class="right">></li> </ul> </div> <script> var box=document.getElementsByTagName("div")[0];//轮播图容器 var img=box.children[0];//图片容器 var circle=box.children[1];//小圆点容器 var arrow=box.children[2];//箭头容器 var left=arrow.children[0];//左箭头 var right=arrow.children[1];//右箭头 var index=0;//当前显示的图片的索引 //需求分析： //1、在最后一幅图后面添加第一幅图 var addImg=img.children[0].cloneNode(true); img.appendChild(addImg); //2、动态添加小圆点，同时点亮第一个 var circles=img.children;//小圆点的个数即所有图片的个数集合 for(var i=1;i<circles.length;i++){ var circleLi=document.createElement("li"); circleLi.innerHTML=i; circle.appendChild(circleLi); } var points=circle.children; light(); function light(){ for(var i=0;i<points.length;i++){ points[i].className=""; if(index>4){ points[0].className="current"; }else{ points[index].className="current"; } } } //3、点击小圆点，ul移动到相应的图片,同时点亮小圆点 for(var j=0;j<points.length;j++){ points[j].index=j; points[j].onclick=function(){ index=this.index; animate(img,-index*box.offsetWidth); light(); } } //4、左右箭头切换图片 right.onclick=autoplay; function autoplay(){ index++; if(index>circles.length-1){ img.style.left=0; index=1; } animate(img,-index*box.offsetWidth); light(); } left.onclick=function(){ index--; if(index<0){ img.style.left=-(circles.length-1)*box.offsetWidth+"px"; index=circles.length-2; } animate(img,-index*box.offsetWidth); light(); } //5、添加自动轮播功能 box.timer=setInterval(autoplay,2000); box.onmouseover=function(){ clearInterval(box.timer); } box.onmouseout=function(){ clearInterval(box.timer); box.timer=setInterval(autoplay,2000); } function animate(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(obj.offsetLeft>target?-20:20); if(Math.abs(obj.offsetLeft-target)>20){ obj.style.left=obj.offsetLeft+speed+"px"; }else{ obj.style.left=target+"px"; } },20) } </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; border: none; list-style: none; } img { width: 310px; height: 220px; } .slider { width: 310px; height: 265px; margin: 100px auto; position: relative; overflow: hidden; cursor: pointer; } .slider-img { width: 310px; height: 220px; } ul { list-style: none; } li { position: absolute; top: 0; left: 0; } .slider-ctrl { text-align: center; padding-top: 10px; } .slider-ctrl-con { display: inline-block; width: 24px; height: 24px; background: url("img/icon.png") no-repeat -24px -780px; text-indent: -99999px; margin: 0 5px; cursor: pointer; } .slider-ctrl-con.current { background-position: -24px -760px; } .prev, .next { position: absolute; top: 40%; width: 30px; height: 35px; background: url("img/icon.png") no-repeat; } .prev { left: 10px; } .next { right: 10px; background-position: 0 -44px; } </style> </head> <body> <div class="slider" id="slider" style="overflow: hidden;"> <div class="slider-img"> <ul> <li> <a href="#"><img src="img/p1.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/p2.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/p3.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/p4.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/p5.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/p6.jpg" alt="" /></a> </li> </ul> </div> <div class="slider-ctrl"> <span class="prev" id="prev"></span> <span class="next" id="next"></span> </div> </div> <script type="text/javascript"> window.onload = function() { var slider = document.getElementById("slider"); //获取元素 var ul = document.getElementsByTagName('ul')[0]; var lis = ul.children; var per = document.getElementById('prev'); var next = document.getElementById('next'); var imgWidth = slider.offsetWidth; //获取图片的宽度作为缓动的距离 for (var i = 0; i < lis.length; i++) { //添加span，用于点击跳转到指定图片 var span = document.createElement('span'); span.innerHTML = i; span.className = "slider-ctrl-con "; //添加未选中状态 per.parentNode.insertBefore(span, per); lis[i].style.left = imgWidth + "px"; } var num = 0; //标记索引值 var span = document.getElementsByTagName('span'); //获取span元素 span[0].className += " current"; //为第一个span标签状态设置为选中状态 lis[0].style.left = 0 + "px"; //为第一张图片设置显示位置 for (var k = 0; k < span.length; k++) { span[k].onclick = function() { //为所有span标签添加点击事件（包括左右按钮） if (this.className == "prev") { //当点击的是向前播放按钮时 //要看上一张 animation(lis[num], imgWidth); //当前图片缓动到右边位置 num = --num < 0 ? lis.length - 1 : num; //索引值设置为前一张图片的索引，当索引值小于0时则等于最后一张的索引 lis[num].style.left = -imgWidth + "px"; //将前一张图片瞬间移动到左侧 animation(lis[num], 0); //将移动到左侧的图片，缓动到显示位置 light(); //点亮底部相应的span标签 } else if (this.className == 'next') { //当点击的是向后播放按钮时 //要看下一张 autoplay(); //按自动播放顺序播放 } else { //获取当前被点击的盒子的索引值 var index = this.innerHTML; //中间：left = 0；左边：left = -imgWidth+“px";右边：left = +imgWidth+”px“ //判断点击的span和当前的图片的索引，谁大谁小 if (index > num) { //当点击索引值大于当前播放图片的索引值时 lis[index].style.left = imgWidth + "px"; //该索引值对应的图片瞬间移动到右侧 animation(lis[num], -imgWidth); //当前播放图片缓动到左侧 animation(lis[index], 0); //再缓动至当前播放位置 num = index; //改变索引值 light(); //点亮底部相应的span标签 } if (index < num) { lis[index].style.left = -imgWidth + "px"; animation(lis[num], imgWidth); animation(lis[index], 0); num = index; light(); } } } } function animation(obj, target) { //缓动 clearInterval(obj.timer); //为避免多个定时器同时运行带来的bug，在用定时器之前先清理定时器 obj.timer = setInterval(function() { var speed = (target - obj.offsetLeft) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为确保能搞达到最终目标值，给speed取整 obj.style.left = obj.offsetLeft + speed + "px"; //赋值给当前元素 if (target == obj.offsetLeft) { //属性达到目标值时，清理定时器 clearInterval(obj.timer); } }, 20); } slider.timer = setInterval(function() { //当前无操作时自动播放 autoplay(); }, 2000); slider.onmouseover = function() { //鼠标进入图片区域停止自动播放 clearInterval(slider.timer); } slider.onmouseout = function() { //鼠标离开图片区域恢复自动播放 clearInterval(slider.timer); slider.timer = setInterval(function() { autoplay(); }, 2000); } function light() { for (var j = 0; j < span.length - 2; j++) { span[j].className = "slider-ctrl-con "; } span[num].className += " current"; } function autoplay() { //封装自动播放函数 animation(lis[num], -imgWidth); num = ++num > lis.length - 1 ? 0 : num; lis[num].style.left = imgWidth + "px"; animation(lis[num], 0); light(); } } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .wrap { width: 1200px; margin: 10px auto; } .slider { height: 500px; position: relative; } .slider li { list-style: none; position: absolute; left: 200px; top: 0; } .slider li img { width: 100%; display: block; } .arrow { opacity: 1; } .prev, .next { width: 76px; height: 112px; position: absolute; top: 50%; margin-top: -56px; background: url(img/prev.png) no-repeat; z-index: 99; } .next { right: 0; background: url("img/next.png") no-repeat; } .prev { left: 0; } </style> </head> <body> <div class="wrap"> <div class="slider"> <ul> <li><img src="img/1.jpg" /></li> <li><img src="img/2.png" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> </ul> <div class="arrow"> <div class="prev" id="prev"></div> <div class="next" id='next'></div> </div> </div> </div> <script> var json = [{ // 0 width: 400, top: 70, left: 50, opacity: 0.2, zIndex: 2 }, { // 1 width: 600, top: 120, left: 0, opacity: 0.8, zIndex: 3 }, { // 2 width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 }, { // 3 width: 600, top: 120, left: 600, opacity: 0.8, zIndex: 3 }, { //4 width: 400, top: 70, left: 750, opacity: 0.2, zIndex: 2 }]; //根据json的内容把图片缓动到相应位置，同时缓动 var liArr = document.getElementsByTagName('li'); var next = document.getElementById('next'); var prev = document.getElementById('prev'); function move() { for (var i = 0; i < liArr.length; i++) { animation(liArr[i], json[i]); } } move() next.onclick = function() { var last = json.pop(); json.unshift(last); move() } prev.onclick = function() { var first = json.shift(); json.push(first); move(); } function animation(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; //json里面有几个属性就要执行几次 var target = 0; //记录目标位置 var leader = 0; //记录当前位置 var speed = 0; //记录速度 for (var key in json) { if (key == 'opacity') { target = Math.round(json['opacity'] * 100) //0-100 leader = getStyle(obj, 'opacity') * 100 //0-100 } else { target = parseInt(json[key]); leader = parseInt(getStyle(obj, key)); } speed = (target - leader) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); leader = leader + speed; //0-100 if (key == 'opacity') { obj.style.opacity = leader / 100; obj.style.filter = "alpha(opacity=" + leader + ")"; } else if (key == "zIndex") { obj.style.zIndex = json['zIndex']; } else { obj.style[key] = leader + "px"; } if (leader != target) { flag = false } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 20) } function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, null)[attr] } else { return obj.currentStyle[attr]; } } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; } ul.nav{ position: fixed; top: 80px; left: 20px; } ul.nav li{ width: 70px; height: 40px; color: #fff; cursor: pointer; background: #ccc; text-align: center; line-height: 40px; list-style: none; margin-top: 10px; } ul.nav .current{ background: red; } ul.content{ height: 500%; } ul.content li{ height: 20%; text-align: center; font: 100px/200px "微软雅黑"; } </style> </head> <body> <ul class="nav"> <li>享品质</li> <li>服饰美妆</li> <li>家电手机</li> <li>电脑数码</li> <li>3C运动</li> </ul> <ul class="content"> <li>享品质</li> <li>服饰美妆</li> <li>家电手机</li> <li>电脑数码</li> <li>3C运动</li> </ul> <script type="text/javascript"> var color=['skyblue','yellowgreen','pink','cornflowerblue',' #87CEEB']; var navlis=document.getElementsByTagName("ul")[0].children; var contentlis=document.getElementsByTagName("ul")[1].children; for(var i=0;i<color.length;i++){ contentlis[i].style.background=color[i]; } for(var i=0;i<navlis.length;i++){ navlis[i].index=i; navlis[i].onclick=function(){ for(var j=0;j<navlis.length;j++){ navlis[j].className=""; } this.className="current"; var yPos=this.index*document.body.offsetHeight; clearInterval(window.timer); window.timer=setInterval(function(){ var speed=(yPos-scroll().top)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); window.scrollTo(0,scroll().top+speed); if(scroll().top==yPos){ clearInterval(Window.timer); } },30) } } window.onscroll=function(){ var num=scroll().top/document.body.offsetHeight; num=Math.ceil(num*2)/2; if(parseInt(num)!=num){ num=num-0.5; } for(var j=0;j<navlis.length;j++){ navlis[j].className=""; } navlis[num].className="current"; } function scroll(){ return{ "top":document.body.scrollTop+document.documentElement.scrollTop, "left":document.body.scrollLeft+document.documentElement.scrollLeft } } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height:100%; } body{ height: 600%; } div{ position: fixed; right: 30px; bottom: 20px; display: none; } </style> </head> <body> <div> <img src="Top.jpg" /> </div> <script type="text/javascript"> var div=document.getElementsByTagName("div")[0]; var img=div.children[0]; window.onscroll=function(){ if(scroll().top>100){ div.style.display="block"; }else{ div.style.display="none"; } } img.onclick=function(){ clearInterval(img.timer); img.timer=setInterval(function(){ var speed=(0-scroll().top)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); window.scrollTo(0,scroll().top+speed); if(scroll().top==0){ clearInterval(img.timer); } },30) } function scroll(){ return{ "top":document.documentElement.scrollTop+document.body.scrollTop, "left":document.documentElement.scrollLeft+document.body.scrollLeft } } </script> </body> </html>常见的JS动画效果还有许多更炫酷的，以上皆是一些比较普通的，但无论多炫酷的动画效果都是以以上的动画效果的原理为基础，以上动画虽然普通但性能方面没有太大问题。
本文发表于2017年09月28日 12:34
(c)注：本文转载自https://my.oschina.net/sichunchen/blog/1544549，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 1939 讨论 0 喜欢 0
Spring Cloud Alibaba基础教程：支持的几种服务消费方式（RestTemplate、WebClient、Feign）
快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型
使用pt-duplicate-key-checker查询重复索引
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
万稳万当，不如一默。任何一句话，你不说出来便是那句话的主人，你说了出来，便是那句话的奴隶。 18:22 04月20日 查看详情 |
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |