html部分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易轮播图js部分</title> <link rel="stylesheet" href="css/css.css"> <script src="js/slider.js"></script> <script src="js/animate.js"></script></head><body><div class="w-slider" id="js_slider"><!--js只支持下划线--> <div class="slider"> <div class="slider-main" id="slider_main_block"> <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div> </div> </div> <!--控制轮播图部分--> <div class="slider-ctrl" id="slider_ctrl"> <span class="slider-ctrl-prev"></span> <span class="slider-ctrl-next"></span> </div></div></body></html>css部分
@charset "UTF-8";*{ margin: 0; padding: 0;}img{ vertical-align: top; /*去掉上下图片之间的空隙*/}.w-slider{ width: 310px; height: 265px; margin: 100px auto; /**/ position: relative; overflow: hidden;}.slider{ width: 310px; height: 220px; /**/}.slider-main{ width: 620px; height: 220px; /**/}.slider-main-img{ position: absolute; top:0; left:0;}.slider-ctrl{ text-align: center; padding-top: 5px;}.slider-ctrl-con{ width: 24px; height: 20px; display: inline-block; /*行内式改成行内块可以改变大小*/ /**/ background: url(../images/icon.png) no-repeat -24px -782px; /*精灵图实现 调整像素 */ margin:0 5px; cursor: pointer; /*将1 2 3 4 5 6的数字隐藏*/ text-indent: -20em; /*text-indent 属性规定文本块中首行文本的缩进。*/ overflow: hidden;}.current{ background-position: -24px -762px;}.slider-ctrl-prev,.slider-ctrl-next{ position: absolute; top:50%; margin-top:-35px; background-color: blue; background: url(../images/icon.png) no-repeat 6px top; width: 30px; height: 35px;}.slider-ctrl-prev{ left:0; cursor: pointer;}.slider-ctrl-next{ right: 0; background-position: -6px -44px; cursor: pointer;}JS部分slider.js
window.onload=function () { //获取元素 function $(id) { return document.getElementById(id); } var js_slider = $("js_slider"); //获取最大的盒子 var slider_main_block = $("slider_main_block"); //装图片的盒子 var imgs = slider_main_block.children; //获得所有的图片组 var slider_ctrl = $("slider_ctrl"); // 获得控制的父盒子 //操作元素 //生成小span for (var i = 0; i < imgs.length; i++) { var span = document.createElement("span"); span.className = "slider-ctrl-con"; span.innerHTML = imgs.length - i;//由于span小方块是倒着插入，所以索引号也要是6 5 4 3 2 1 slider_ctrl.insertBefore(span, slider_ctrl.children[1]); //insertBefore在参照的元素之前插入 } var spans = slider_ctrl.children; //得到所有的 span spans[1].setAttribute("class", "slider-ctrl-con current"); //setAttribute() 方法添加指定的属性，并为其赋指定的值。这里制定类名，给它添加current类 var scrollWidth = js_slider.clientWidth; //得到大盒子的宽度 也就是后面后面动画走的距离 //刚开始 第一张图片在框里 其余的图片框右边 for (var i = 1; i < imgs.length; i++) //图片从第二张开始排在框右边 { imgs[i].style.left = scrollWidth + "px"; } //遍历三个按钮 // span是8个按钮 两个箭头 六个小方块 var iNow=0; //控制播放张数 for(var k in spans) //k在数组里是索引号 span[0]--第一个span { spans[k].onclick = function () { //点击span里的哪一个就输出对应的值 两个箭头符号值为空 if (this.className == "slider-ctrl-prev") { // alert("你点击的是左侧按钮") animate(imgs[iNow], {left: scrollWidth}); --iNow < 0 ? iNow = imgs.length - 1 : iNow; imgs[iNow].style.left = -scrollWidth + "px"; animate(imgs[iNow], {left: 0}); setSquare(); } else if (this.className == "slider-ctrl-next") { // alert("你点击的是右侧按钮"); animate(imgs[iNow], {left: -scrollWidth}); //当前的那个图片 慢慢的走到 -scrollWidth位置 ++iNow > imgs.length - 1 ? iNow = 0 : iNow; // iNow++; //当前图片加1 先++ // if(iNow>imgs.length-1) //后判断 // { // iNow=0; // } imgs[iNow].style.left = scrollWidth + "px"; //下一张快速运动到右边310px的位子 animate(imgs[iNow], {left: 0}); //下一张图片走到0的位置（框里） setSquare(); } else { // alert(this.innerHTML);//下面的小span点击 //首先要知道点击的是第几张--当前的索引号 var that = this.innerHTML - 1; //that对应每张图片的索引号 if (that > iNow) { //同右侧点击一样 animate(imgs[iNow], {left: -scrollWidth}); imgs[that].style.left = scrollWidth + "px"; } else if(that < iNow) { //同点击左侧一样 animate(imgs[iNow], {left: scrollWidth}); imgs[that].style.left = -scrollWidth + "px"; } iNow=that; animate(imgs[iNow], {left: 0}); setSquare(); } } } // 一个可以控制 播放span 的 函数 当前 function setSquare() { // 清除所有的span current 留下 满足需要的拿一个 for(var i=1;i<spans.length-1;i++){ // 8个span 我们要 1-6 不要 7 索引号 spans[i].className = "slider-ctrl-con"; } spans[iNow+1].className = "slider-ctrl-con current"; // 记住 + 1 } //定时器开始 右侧按钮 var timer=null; timer = setInterval(autoplay,2000); // 开启定时器 function autoplay() { // 当我们点击时候， 当前的这张图片 先慢慢的走到左边 下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中 // alert("您点击了右侧按钮"); //iNow == 0 animate(imgs[iNow],{left: -scrollWidth}); // 当前的那个图片 慢慢的走到 -scrollWidth 位置 // 变成1 先 ++ ++iNow 先自加 后 运算 ++iNow > imgs.length -1 ? iNow = 0 : iNow; imgs[iNow].style.left = scrollWidth + "px"; // 立马执行 快速走到右侧 animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置 慢慢走过来 setSquare(); // 调用square } //鼠标经过清除定时器 js_slider.onmouseover = function() { clearInterval(timer); } js_slider.onmouseout = function() { clearInterval(timer); // 要执行定时器 先清除定时器 timer = setInterval(autoplay,2000); // 开启定时器 }}
animate.js
/** * Created by andy on 2015/11/23. */// 多个属性运动框架 添加回调函数function animate(obj,json,fn) { // 给谁 json clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面 for(var attr in json){ // attr 属性 json[attr] 值 //开始遍历 json // 计算步长 用 target 位置 减去当前的位置 除以 10 // console.log(attr); var current = 0; if(attr == "opacity") { current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; console.log(current); } else { current = parseInt(getStyle(obj,attr)); // 数值 } // console.log(current); // 目标位置就是 属性值 var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10 step = step > 0 ? Math.ceil(step) : Math.floor(step); //判断透明度 if(attr == "opacity") // 判断用户有没有输入 opacity { if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity { // obj.style.opacity obj.style.opacity = (current + step) /100; } else { // obj.style.filter = alpha(opacity = 30) obj.style.filter = "alpha(opacity = "+(current + step)* 10+")"; } } else if(attr == "zIndex") { obj.style.zIndex = json[attr]; } else { obj.style[attr] = current + step + "px" ; } if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面 { flag = false; } } if(flag) // 用于判断定时器的条件 { clearInterval(obj.timer); //alert("ok了"); if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调 { fn(); // 函数名 + （） 调用函数 执行函数 } } },10)}function getStyle(obj,attr) { // 谁的 那个属性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回传递过来的某个属性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 }}
来源：https://www.cnblogs.com/Daisy0331/p/8970810.html