JS10(网易广告轮播、旋转木马轮播图)
网易广告轮播
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/css.css"/> <script src="js/animate.js" type="text/javascript"></script> <script src="js/slider.js" type="text/javascript"></script> </head> <body> <div class="w-slider" id="js_slider"> <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.css
* {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; width: 310px; height: 220px; } .slider-main-img img { width: 100%; } .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; text-indent: -20em; overflow: hidden; } .current { background-position: -24px -762px; } .slider-ctrl-prev, .slider-ctrl-next { position: absolute; top: 50%; margin-top: -35px; background:url(../images/icon.png) no-repeat 6px top; width: 30px; height: 35px; opacity: 0.8; cursor: pointer; } .slider-ctrl-prev { left: 0; } .slider-ctrl-next { right: 0; background-position: -6px -44px; }
slider.js
/** * Created by andy on 2015/11/23. */ 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 的 父盒子 // 操作元素 // 生成小span for(var i=0;i<imgs.length; i++) { var span = document.createElement("span");// 创建 span span.className = "slider-ctrl-con"; // 添加类名 span.innerHTML = imgs.length-i; // 6 - 0 6 - 1 // 实现 倒序 的方式插入 slider_ctrl.insertBefore(span,slider_ctrl.children[1]); // 再 父亲 倒数第二个盒子的前面插入 } // 下面的第一个小span 是默认的蓝色 var spans = slider_ctrl.children; // 得到所有的 span spans[1].setAttribute("class","slider-ctrl-con current"); // 两个类名 var scrollWidth = js_slider.clientWidth; // 得到大盒子的宽度 也就是 后面动画走的距离 310 // 刚开始，按道理 第一张图片 留下 其余的人走到 310 的位置上 for(var i = 1; i<imgs.length; i++) { // 从1 开始 因为第一张不需要计算 imgs[i].style.left = scrollWidth + "px"; // 其他人 先右移动到 310 的位置 } // 遍历三个按钮 // spans 是 8个按钮 他们都是 span var iNow = 0; // 用来 控制播放张数 for(var k in spans){ // k 是索引号 spans[k] spans[0] 第一个span spans[k].onclick = function() { // alert(this.innerHTML); if(this.className == "slider-ctrl-prev"){ // 判断当前点击的这个按钮是不是 prev // alert("您点击了左侧按钮"); // 当我们左侧点击时候， 当前的这张图片 先慢慢的走到右边 上一张 一定先快速走到左侧 （-310）的位置，然后慢慢的走到舞台中 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") { // 右侧按钮开始 autoplay(); } else { // alert("您点击了下面的span"); // 我们首先要知道我们点击是第几张图片 --- 获得当前的索引号 // alert(this.innerHTML); var that = this.innerHTML - 1; // console.log(typeof that); if(that > iNow) { // 做法等同于 右侧按钮 animate(imgs[iNow],{left: -scrollWidth}); // 当前的这张慢慢的走出去 左侧 imgs[that].style.left = scrollWidth + "px"; // 点击的那个索引号 快速走到右侧 310 } else if(that < iNow) { // 做法等同于 左侧按钮 animate(imgs[iNow],{left: scrollWidth}); imgs[that].style.left = -scrollWidth + "px"; } iNow = that; // 给当前的索引号 animate(imgs[iNow],{left: 0}); /*比如 已经播放到 第4张 我点击了 第2张 把 2 给 inow 下一次播放，应该播放第3张*/ // 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); // 开启定时器 } }
旋转木马轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"/> </head> <body> <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li> <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li> <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li> <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li> <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:;" class="prev"></a> <a href="javascript:;" class="next"></a> </div> </div> </div> </body> </html> <script src="js/animate.js" type="text/javascript"></script> <script> var wrap = document.getElementById("wrap"); // 大盒子 var arrow = document.getElementById("arrow"); // 三角 var slider = document.getElementById("slide"); var lis = slider.getElementsByTagName("li"); // 所有要操作的盒子 wrap.onmouseover = function() { // 鼠标经过显示和隐藏 左右两个箭头 animate(arrow,{'opacity':100}); } wrap.onmouseout = function() { animate(arrow,{'opacity':0}); } // 存储了每个图片的信息 var json = [ { // 1 width:400, top:20, left:50, opacity:20, z:2 }, { // 2 width:600, top:70, left:0, opacity:80, z:3 }, { // 3 width:800, top:100, left:200, opacity:100, z:4 }, { // 4 width:600, top:70, left:600, opacity:80, z:3 }, { //5 width:400, top:20, left:750, opacity:20, z:2 } ]; // 两个按钮点击事件 // 函数节流 var jieliu = true; // 用来控制函数节奏的 变量 var as = arrow.children; change(); for(var k in as) { as[k].onclick = function() { if(this.className == "prev") { // alert("左侧") 移除第一个 放到json 最后一个 if(jieliu == true) { change(false); jieliu = false; // 点击完毕之后，立马取反 } } else { // alert('右侧'); 把 最后一个json 删除 并且把最后一个添加到json 第一个位置 if(jieliu == true) { change(true); jieliu = false; // 点击完毕之后，立马取反 } } } } function change(flag) { // 来判断 if(flag) { // 把 最后一个json 删除 并且把最后一个添加到json 第一个位置 json.unshift(json.pop()); } else { // 移除第一个 放到json 最后一个 json.push(json.shift()); } // 为什么给for呢？ 以为我们的json 有5个 盒子li 有 5个 for(var i=0;i<json.length; i++) { animate(lis[i],{ width: json[i].width, top: json[i].top, left: json[i].left, opacity:json[i].opacity, zIndex:json[i].z },function(){ jieliu = true;}) // 回调函数是等动画执行完毕 才行 } } </script>
