<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????*{margin:0;padding:0;} ???????ul,li{ ???????????list-style: none; ???????} ???????#banner{ ???????????width: 800px; ???????????height: 400px; ???????????margin: 30px auto; ???????????position: relative; ???????????overflow: hidden; ???????} ???????#banner>ul{ ???????????position: absolute; ???????} ???????#banner>ul>li{ ???????????float: left; ???????????width: 800px; ???????????height: 400px; ???????} ???????#banner>#dir>a{ ???????????width: 80px; ???????????height: 40px; ???????????position: absolute; ???????????text-align: center; ???????????line-height: 40px; ???????????text-decoration: none; ???????????color: #fff; ???????????background: rgba(0,0,0,.5); ???????????top: 50%; ???????????margin-top: -20px; ???????} ???????#banner>#dir>a:nth-child(2){ ???????????right: 0; ???????} ???????#btn{ ???????????position: absolute; ???????????bottom: 10px; ???????????width: 120px; ???????????left: 50%; ???????????margin-left: -60px; ???????} ???????#btn>a{ ???????????float: left; ???????????width: 15px; ???????????height: 15px; ???????????background: #000; ???????????border-radius: 50%; ???????????margin-left: 10px; ???????} ???????#btn>.active{ ???????????background: #c33; ???????} ???</style></head><body> ???<div id="banner"> ???????<ul> ???????????<li><img src="img/1.png"></li> ???????????<li><img src="img/2.png"></li> ???????????<li><img src="img/3.png"></li> ???????????<li><img src="img/4.png"></li> ???????</ul> ???????<div id="dir"> ???????????<a href="##"><</a> ???????????<a href="##">></a> ???????</div> ???????<div id="btn"> ???????????<a href="##" class="active"></a> ???????????<a href="##"></a> ???????????<a href="##"></a> ???????????<a href="##"></a> ???????</div> ???</div></body></html><script src="../../pool.js"></script><script>var oBanner = document.getElementById("banner");var oUl = document.querySelector("#banner>ul");var aLi = oUl.getElementsByTagName("li")var aDir = document.querySelectorAll("#dir>a");var aBtn = document.querySelectorAll("#btn>a");var iNow = 0;var iWidth = aLi[0].offsetWidth;var li = aLi[0].cloneNode(true);oUl.appendChild(li);oUl.style.width = iWidth * aLi.length+"px";var timer = null;for(var i=0;i<aBtn.length;i++){ ???aBtn[i].index = i; ???aBtn[i].onmouseover = function(){ ???????for(var j=0;j<aBtn.length;j++){ ???????????aBtn[j].className = "" ???????} ???????this.className = "active"; ???????iNow = this.index; ???????toImg(); ???}}aDir[0].onclick = function(){ ???if(iNow == 0){ ???????iNow = aLi.length-2; ???????oUl.style.left = -(aLi.length-1)*aLi[0].offsetWidth+"px"; ???}else{ ???????iNow--; ???} ???toImg();}aDir[1].onclick = function(){ ???if(iNow == aLi.length-1){ ???????iNow = 1; ???????oUl.style.left = 0; ???}else{ ???????iNow++; ???} ???toImg();}//做轮播图之前一定要先做一个鼠标移入停止轮播 移除继续轮播oBanner.onmouseover = function(){ ???clearInterval(timer)}oBanner.onmouseout = function(){ ???autoPlay()}autoPlay()function autoPlay(){ ???timer = setInterval(function(){ ???????if(iNow == aLi.length-1){ ???????????iNow = 1; ???????????oUl.style.left = 0; ???????}else{ ???????????iNow++; ???????} ???????toImg(); ???},3000)}//轮播的原理function toImg(){ ???move(oUl,{left:-iNow*iWidth}) ???for(var i=0;i<aBtn.length;i++){ ???????aBtn[i].className = ""; ???} ???aBtn[iNow==aLi.length-1?0:iNow].className = "active";}</script>/*完美运动框架 */function move(obj,json,fn){ ???//防止多次点击 ??关闭掉上一个定时器 ???clearInterval(obj.timer); ???//开启定时器 ?obj.timer:防止多个对象抢定时器 ???obj.timer = setInterval(function(){ ???????//开关门 ???????var bStop = true; ???????//传入的是一个对象 需要将对象中所有的值进行遍历 ???????for(var attr in json){ ???????????/* ???????????????因为offset的局限性太大，如果想要这个方法灵活多用只能用获取非行间样式 ???????????????考虑2点 ???????????????????1、透明度是小数 不能够直接取整需要先*100在取整 ???????????????????2、因为getStyle()获取出来的是字符串 我们需要将它转换为数字 ????????????*/ ???????????var iCur = 0; ???????????if(attr == "opacity"){ ???????????????iCur = parseInt(getStyle(obj,attr)*100); ???????????}else{ ???????????????iCur = parseInt(getStyle(obj,attr)); ???????????} ???????????/* ???????????因为要做缓存运动，因此需要计算速度 速度是一个不定值 ?????????????公式： ?(目标值 - 当前对象的位置) /系数 ?建议是8 ???????????考虑的问题： ???????????????计算机处理小数有问题因此需要将小数干掉，我们要进行向上取整和向下取整 ????????????*/ ???????????//算速度 ???????????var speed = (json[attr] - iCur)/8; ???????????speed = speed>0?Math.ceil(speed):Math.floor(speed); ???????????/*判断是否都已经到达终点 只要有一个没有到达终点就将bStop为false ?循环完毕以后判断bstop来决定关闭定时器*/ ???????????if(json[attr] !=iCur){ ???????????????bStop = false; ???????????} ???????????/* ???????????????考虑2部分 ???????????????????1、透明度是不需要加px的因此需要单独判断 ???????????????????2、普通的属性是需要加px的因此需要再次判断 ????????????*/ ???????????if(attr == "opacity"){ ???????????????//透明度的兼容性 ???????????????obj.style.opacity = (iCur+speed)/100; ???????????????obj.style.filter = "alpha(opacity:"+(iCur+speed)+")"; ???????????}else{ ???????????????obj.style[attr] = (iCur+speed)+"px"; ???????????} ???????} ???????//当循环完毕以后 判断bStop的状态来决定是否关闭定时器 ???????if(bStop){ ???????????clearInterval(obj.timer); ???????????//链式操作 ???????????fn&&fn(); ???????} ???},30)}<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????* { ???????????????margin: 0; ???????????????padding: 0; ???????????} ???????????????????????ul, ???????????li { ???????????????list-style: none; ???????????} ???????????????????????#banner { ???????????????width: 800px; ???????????????height: 400px; ???????????????margin: 30px auto; ???????????????position: relative; ???????????????overflow: hidden; ???????????????????????????} ???????????????????????#banner>ul>li { ???????????????position: absolute; ???????????????width: 800px; ???????????????height: 400px; ???????????????opacity: 0; ???????????} ???????????????????????#banner>ul>li:nth-child(1) { ???????????????opacity: 1 ???????????} ???????????????????????#banner>#dir>a { ???????????????width: 80px; ???????????????height: 40px; ???????????????position: absolute; ???????????????text-align: center; ???????????????line-height: 40px; ???????????????text-decoration: none; ???????????????color: #fff; ???????????????background: rgba(0, 0, 0, .5); ???????????????top: 50%; ???????????????margin-top: -20px; ???????????????????????????} ???????????????????????#banner>#dir>a:nth-child(2) { ???????????????right: 0; ???????????} ???????????????????????#btn { ???????????????position: absolute; ???????????????bottom: 10px; ???????????????width: 120px; ???????????????left: 50%; ???????????????margin-left: -60px; ???????????} ???????????????????????#btn>a { ???????????????float: left; ???????????????width: 15px; ???????????????height: 15px; ???????????????background: #000; ???????????????border-radius: 50%; ???????????????margin-left: 10px; ???????????} ???????????????????????#btn>.active { ???????????????background: #c33; ???????????} ???????????</style> ???</head> ???<body> ???????<div id="banner"> ???????????<ul> ???????????????<li><img src="img/1.png"></li> ???????????????<li><img src="img/2.png"></li> ???????????????<li><img src="img/3.png"></li> ???????????????<li><img src="img/4.png"></li> ???????????</ul> ???????????<div id="dir"> ???????????????<a href="##"><</a> ???????????????<a href="##">></a> ???????????</div> ???????????<div id="btn"> ???????????????<a href="##" class="active"></a> ???????????????<a href="##"></a> ???????????????<a href="##"></a> ???????????????<a href="##"></a> ???????????</div> ???????</div> ???</body></html><script src="js/pool.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> ???var aLi = document.querySelectorAll("#banner>ul>li"); ???//小圆点动态添加 ????var big_box = document.getElementById("banner"); ???var btnlist = document.getElementById("btn"); ???var aUl = document.getElementsByTagName("ul")[0]; ???var aDir = document.querySelectorAll("#dir>a"); ???var abtn = document.querySelectorAll("#btn>a"); ???var iNow = 0; ???var iNext = 0; ???var timer = null; ???aDir[0].onclick = function() { ???????if(iNext == 0) { ???????????iNext = aLi.length - 1; ???????} else { ???????????iNext--; ???????} ???????toimg(); ???} ???aDir[1].onclick = function() { ???????if(iNext == aLi.length - 1) { ???????????iNext = 0; ???????} else { ???????????iNext++; ???????} ???????toimg(); ???} ???big_box.onmousemove = function() { ???????clearInterval(timer); ???} ???big_box.onmouseout = function() { ???????autoPlay(); ???}autoPlay(); ???function autoPlay() { ???????timer = setInterval(function() { ???????????if(iNext == aLi.length - 1) { ???????????????iNext = 0; ???????????} else { ???????????????iNext++; ???????????} ???????????toimg(); ???????}, 2000) ???} ???function toimg() { ???????move(aLi[iNow], { ???????????opacity: 0 ???????}) ???????move(aLi[iNext], { ???????????opacity: 100 ???????}) ???????iNow = iNext; ???????for(var i = 0; i < abtn.length; i++) { ???????????abtn[i].className = ""; ???????} ???????abtn[iNext].className = "active"; ???} ???//下面的小圆点 ???for(var i = 0; i < abtn.length; i++) { ???????abtn[i].index = i; ???????abtn[i].onmouseover = function() { ???????????for(var j = 0; j < abtn.length; j++) { ??????????????abtn[j].className = ""; ???????????} ???????????????????????this.className = "active"; ???????????//iNow = iNext; ???????????iNext =this.index; ???????????console.log(iNow); ???????????console.log(iNext); ???????????toimg(); ???????????} ???}</script>js无缝轮播 和淡入淡出轮播
原文地址：https://www.cnblogs.com/carolavie/p/9533443.html