html代码：
1 2318413 175126
7
8
9
10
11
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 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 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 } 动画代码：
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 //开始遍历 json11 // 计算步长 用 target 位置 减去当前的位置 除以 1012 // 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 else20 {21 current = parseInt(getStyle(obj,attr)); // 数值22 }23 // console.log(current);24 // 目标位置就是 属性值25 var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 1026 step = step > 0 ? Math.ceil(step) : Math.floor(step);27 //判断透明度28 if(attr == "opacity") // 判断用户有没有输入 opacity29 {30 if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity31 {32 // obj.style.opacity33 obj.style.opacity = (current + step) /100;34 }35 else36 { // 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 else46 {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 else72 {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 }