html代码：
1 <body> 2 <div class="w-slider" id="js_slider"> 3 <div class="slider"> 4 <div class="slider-main" id="slider_main_block"> 5 <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""/></a></div> 6 <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""/></a></div> 7 <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""/></a></div> 8 <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""/></a></div> 9 <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""/></a></div> 10 <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""/></a></div> 11 </div> 12 </div> 13 <div class="slider-ctrl" id="slider_ctrl"> 14 <span class="slider-ctrl-prev"></span> 15 <span class="slider-ctrl-next"></span> 16 </div> 17 </div> 18 </body>
js代码：
1 window.onload = function() { 2 // 获取元素 3 function $(id) {return document.getElementById(id);} 4 var js_slider = $("js_slider"); // 获取最大盒子 5 var slider_main_block = $("slider_main_block"); // 滚动图片的父亲 6 var imgs = slider_main_block.children; // 获得所有的图片组 需要滚动的部分 7 var slider_ctrl = $("slider_ctrl"); // 获得 控制span 的 父盒子 8 // 操作元素 9 // 生成小span 10 for(var i=0;i<imgs.length; i++) { 11 12 var span = document.createElement("span");// 创建 span 13 span.className = "slider-ctrl-con"; // 添加类名 14 span.innerHTML = imgs.length-i; // 6 - 0 6 - 1 // 实现 倒序 的方式插入 15 slider_ctrl.insertBefore(span,slider_ctrl.children[1]); // 再 父亲 倒数第二个盒子的前面插入 16 } 17 // 下面的第一个小span 是默认的蓝色 18 var spans = slider_ctrl.children; // 得到所有的 span 19 spans[1].setAttribute("class","slider-ctrl-con current"); // 两个类名 20 21 var scrollWidth = js_slider.clientWidth; // 得到大盒子的宽度 也就是 后面动画走的距离 310 22 // 刚开始，按道理 第一张图片 留下 其余的人走到 310 的位置上 23 for(var i = 1; i<imgs.length; i++) { // 从1 开始 因为第一张不需要计算 24 25 imgs[i].style.left = scrollWidth + "px"; // 其他人 先右移动到 310 的位置 26 } 27 // 遍历三个按钮 28 // spans 是 8个按钮 他们都是 span 29 var iNow = 0; // 用来 控制播放张数 30 for(var k in spans){ // k 是索引号 spans[k] spans[0] 第一个span 31 spans[k].onclick = function() { 32 // alert(this.innerHTML); 33 if(this.className == "slider-ctrl-prev"){ // 判断当前点击的这个按钮是不是 prev 34 // alert("您点击了左侧按钮"); 35 // 当我们左侧点击时候， 当前的这张图片 先慢慢的走到右边 上一张 一定先快速走到左侧 （-310）的位置，然后慢慢的走到舞台中 36 animate(imgs[iNow],{left: scrollWidth}); 37 --iNow < 0 ? iNow = imgs.length - 1 : iNow; 38 imgs[iNow].style.left = -scrollWidth + "px"; 39 animate(imgs[iNow],{left: 0}); 40 setSquare(); 41 } 42 else if(this.className == "slider-ctrl-next") { // 右侧按钮开始 43 autoplay(); 44 } 45 else { 46 // alert("您点击了下面的span"); 47 // 我们首先要知道我们点击是第几张图片 --- 获得当前的索引号 48 // alert(this.innerHTML); 49 var that = this.innerHTML - 1; 50 // console.log(typeof that); 51 if(that > iNow) { 52 // 做法等同于 右侧按钮 53 animate(imgs[iNow],{left: -scrollWidth}); // 当前的这张慢慢的走出去 左侧 54 imgs[that].style.left = scrollWidth + "px"; // 点击的那个索引号 快速走到右侧 310 55 } 56 else if(that < iNow) { 57 // 做法等同于 左侧按钮 58 animate(imgs[iNow],{left: scrollWidth}); 59 imgs[that].style.left = -scrollWidth + "px"; 60 } 61 iNow = that; // 给当前的索引号 62 animate(imgs[iNow],{left: 0}); 63 /*比如 已经播放到 第4张 我点击了 第2张 把 2 给 inow 64 下一次播放，应该播放第3张*/ 65 // animate(imgs[iNow],{left: 0}); 66 setSquare(); 67 } 68 } 69 } 70 // 一个可以控制 播放span 的 函数 当前 71 function setSquare() { 72 // 清除所有的span current 留下 满足需要的拿一个 73 for(var i=1;i<spans.length-1;i++){ // 8个span 我们要 1-6 不要 7 索引号 74 spans[i].className = "slider-ctrl-con"; 75 } 76 spans[iNow+1].className = "slider-ctrl-con current"; // 记住 + 1 77 } 78 // 定时器开始 其实， 定时器就是 右侧按钮 79 var timer = null; 80 timer = setInterval(autoplay,2000); // 开启定时器 81 function autoplay() { 82 // 当我们点击时候， 当前的这张图片 先慢慢的走到左边 下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中 83 // alert("您点击了右侧按钮"); 84 //iNow == 0 85 animate(imgs[iNow],{left: -scrollWidth}); 86 // 当前的那个图片 慢慢的走到 -scrollWidth 位置 87 // 变成1 先 ++ ++iNow 先自加 后 运算 88 ++iNow > imgs.length -1 ? iNow = 0 : iNow; 89 imgs[iNow].style.left = scrollWidth + "px"; // 立马执行 快速走到右侧 90 animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置 慢慢走过来 91 setSquare(); // 调用square 92 } 93 //鼠标经过清除定时器 94 js_slider.onmouseover = function() { 95 clearInterval(timer); 96 } 97 js_slider.onmouseout = function() { 98 clearInterval(timer); // 要执行定时器 先清除定时器 99 timer = setInterval(autoplay,2000); // 开启定时器 100 } 101 }
动画代码：
1 /** 2 * Created by andy on 2015/11/23. 3 */ 4 // 多个属性运动框架 添加回调函数 5 function animate(obj,json,fn) { // 给谁 json 6 clearInterval(obj.timer); 7 obj.timer = setInterval(function() { 8 var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面 9 for(var attr in json){ // attr 属性 json[attr] 值 10 //开始遍历 json 11 // 计算步长 用 target 位置 减去当前的位置 除以 10 12 // console.log(attr); 13 var current = 0; 14 if(attr == "opacity") 15 { 16 current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; 17 console.log(current); 18 } 19 else 20 { 21 current = parseInt(getStyle(obj,attr)); // 数值 22 } 23 // console.log(current); 24 // 目标位置就是 属性值 25 var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10 26 step = step > 0 ? Math.ceil(step) : Math.floor(step); 27 //判断透明度 28 if(attr == "opacity") // 判断用户有没有输入 opacity 29 { 30 if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity 31 { 32 // obj.style.opacity 33 obj.style.opacity = (current + step) /100; 34 } 35 else 36 { // obj.style.filter = alpha(opacity = 30) 37 obj.style.filter = "alpha(opacity = "+(current + step)* 10+")"; 38 39 } 40 } 41 else if(attr == "zIndex") 42 { 43 obj.style.zIndex = json[attr]; 44 } 45 else 46 { 47 obj.style[attr] = current + step + "px" ; 48 } 49 50 if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面 51 { 52 flag = false; 53 } 54 } 55 if(flag) // 用于判断定时器的条件 56 { 57 clearInterval(obj.timer); 58 //alert("ok了"); 59 if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调 60 { 61 fn(); // 函数名 + （） 调用函数 执行函数 62 } 63 } 64 },10) 65 } 66 function getStyle(obj,attr) { // 谁的 那个属性 67 if(obj.currentStyle) // ie 等 68 { 69 return obj.currentStyle[attr]; // 返回传递过来的某个属性 70 } 71 else 72 { 73 return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 74 } 75 }
css代码：
1 * {margin:0;padding:0; } 2 img { 3 vertical-align: top; 4 } 5 .w-slider { 6 width: 310px; 7 height: 265px; 8 margin:100px auto; 9 position: relative; 10 overflow: hidden; 11 } 12 .slider { 13 width: 310px; 14 height: 220px; 15 16 } 17 .slider-main { 18 width: 620px; 19 height: 220px; 20 } 21 .slider-main-img { 22 position: absolute; 23 top: 0; 24 left: 0; 25 width: 310px; 26 height: 220px; 27 } 28 .slider-main-img img { 29 width: 100%; 30 } 31 .slider-ctrl { 32 text-align: center; 33 padding-top: 5px; 34 } 35 .slider-ctrl-con { 36 width: 24px; 37 height: 20px; 38 display:inline-block; 39 background:url(../images/icon.png) no-repeat -24px -782px; 40 margin: 0 5px; 41 cursor: pointer; 42 text-indent: -20em; 43 overflow: hidden; 44 } 45 .current { 46 background-position: -24px -762px; 47 } 48 .slider-ctrl-prev, 49 .slider-ctrl-next { 50 position: absolute; 51 top: 50%; 52 margin-top: -35px; 53 background:url(../images/icon.png) no-repeat 6px top; 54 width: 30px; 55 height: 35px; 56 opacity: 0.8; 57 cursor: pointer; 58 } 59 .slider-ctrl-prev { 60 left: 0; 61 } 62 .slider-ctrl-next { 63 right: 0; 64 background-position: -6px -44px; 65 }
