手风琴轮播图 效果图展示
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { width: 240px; height: 400px; float: left; } div ul { width: 1300px; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="common.js"></script> <script> var list = ele$("li"); for (var i =0;i<list.length;i++){ list[i].style.background="url(img/"+(i+1)+".jpg)"; list[i].onmouseover=over; list[i].onmouseout=out; } function over() { for (var j =0;j<list.length;j++){ animateStyle(list[j],{"width":100}) } animateStyle(this,{"width":800}) } function out() { for (var j =0;j<list.length;j++){ animateStyle(list[j],{"width":240}) } // animateStyle(this,{"width":800}) } </script> </body> </html>common.js
// 通过id名获取的元素 function my$(id) { return document.getElementById(id); } //通过标签名获取的元素 function ele$(element) { return document.getElementsByTagName(element); } //设置任意的标签中的任意文本内容 function setInnerText(element, text) { //判断是否支持这个属性 if(typeof element.textContent == "undefined"){ console.log(element.textContent+"===="); //说明不支持 element.innerText = text; }else{ console.log(element.textContent); element.textContent = text; } } //封装 获取任意标签中的文本内容. 需要返回值 function getInnerText(element){ if(element.textContent == undefined){ return element.innerText; }else{ return element.textContent; } } //封装一个获取任意一个父级元素的第一个子元素 function getFirstElementChild(parentElement) { if(parentElement.firstElementChild){ //隐式布尔类型转换 --->true //如果支持 return parentElement.firstElementChild; }else{ return parentElement.firstChild; } } /* * @params : 对象 事件类型 回调函数 * 作用: 为任意元素, 绑定任意的事件, 执行任意的处理函数 * */ function addEventListener(element, type, fn) { //判断是不是支持这个方法 对象.方法名同样可以判断 if(element.addEventListener){ element.addEventListener(type, fn, false); }else if(element.attachEvent){ element.attachEvent("on" + type, fn); }else{ element["on"+type] = fn; } } //封装匀速动画函数--->任意一个元素移动到指定的目标位置 //@params : 元素 目标位置 function animate(element,target ) { //先清理定时器,防止多次绑定 clearInterval(element.timeId); element.timeId = setInterval(function () { //1.获取div当前的位置--->看成盒子当前的left值 var current = element.offsetLeft;//number类型 //2.div每一次移动多少像素 = 10 即步数 var step = 10; //2.1判断往哪边移动 step = current <= target ? step : -step; //3.每次移动后的距离 current += step; 4.判断剩余的步数是否大于 step if(Math.abs(target - current) > Math.abs(step)){ element.style.left = current + "px"; }else{ clearInterval(element.timeId); element.style.left = target + "px"; } },5) } //简化 :封装获取页面向上或者是向左卷曲出去的距离值 function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft, top: window.pageYOffset || document.documentElement.scrollTop }; } //封装变速动画 //@params : 元素 目标位置 function animateBian(element, target) { clearInterval(element.timeId); element.timeId = setInterval(function () { //获取当前的元素的位置 var current = element.offsetLeft; //设置移动的步数 var step = (target - current)/10; //判断步数 > 0, 则向上取整 ,否则向下取整 step = step > 0 ? Math.ceil(step) : Math.floor(step); //获取每次移动后的left值 current += step; element.style.left = current + "px"; if(current == target){ clearInterval(element.timeId); } console.log("目标位置:" + target + ",每次移动的步数" + step +",当前位置:" + current ); },10) } //获取任意一个元素的任意一个样式属性值 //@params ; element 元素 attr 属性值 function getStyle(element,attr){ if (window.getComputedStyle) { return window.getComputedStyle(element,null)[attr]; }else { return element.currentStyle[attr]; } } //设置任意一个元素的任意一个样式属性值达到任意一个目标位置 //@params : element --元素 // sttr -- 属性 // target --目标位置 function animateStyle(element,attr,target) { clearInterval(element.timeId); element.timeId = setInterval(function () { var current = parseInt(getStyle(element,attr)); var step = (target - current)/10; step >0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current +"px"; if (current == target){ clearInterval(element.timeId); } },50) } //设置任意一个元素的任意一个样式属性值达到任意一个目标位置 //@params : element --元素 // sttr -- 属性 function animateStyle(element,json) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag = true; for (var attr in json) { var current = parseInt(getStyle(element,attr)); var target = json[attr]; var step = (target - current)/10; step = step >0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current +"px"; if (current != target){ flag =false; } } if (flag ==true) { clearInterval(element.timeId); } },50) } //设置任意一个元素的任意一个样式属性值达到任意一个目标位置 //@params : element --元素 // json -- 属性 // fn --回调函数 function animateStyle(element,json,fn) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag = true; for (var attr in json) { if(attr=="opacity"){ var current = getStyle(element,attr)*100; var target = json[attr]*100; var step = (target - current)/10; step = step >0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current/100; if (current != target){ flag =false; } }else if(attr=="zIndex"){ element.style[attr]=json[attr]; }else { var current = parseInt(getStyle(element,attr)); var target = json[attr]; var step = (target - current)/10; step = step >0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current +"px"; if (current != target){ flag =false; } } } if (flag ==true) { clearInterval(element.timeId); if (fn){ fn(); } } },50) }旋转木马轮播图 效果图展示
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css(1).css"/> <script src="common.js"></script> <script> // var config = [ { width: 400, top: 20, left: 50, opacity: 0.2, zIndex: 2 },//0 { width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 },//1 { width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 },//2 { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 },//3 { width: 400, top: 20, left: 750, opacity: 0.2, zIndex: 2 }//4 ]; window.onload=function () { var list = ele$("li"); var flag = true; function move() { for (var i =0;i<list.length;i++){ animateStyle(list[i],config[i],function () { flag = true; }); } } move(); my$("slide").onmouseover=function () { animateStyle(my$("arrow"),{opacity:1}) } my$("slide").onmouseout=function () { animateStyle(my$("arrow"),{opacity:0}) } my$("arrRight").onclick=function () { if (flag) { flag = false; config.push(config.shift()); move(); } } my$("arrLeft").onclick=function () { if (flag != true) { return; } flag = false; config.unshift(config.pop()); move(); } } </script> </head> <body> <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#"><img src="img/slidepic1.jpg" alt=""/></a></li> <li><a href="#"><img src="img/slidepic2.jpg" alt=""/></a></li> <li><a href="#"><img src="img/slidepic3.jpg" alt=""/></a></li> <li><a href="#"><img src="img/slidepic4.jpg" alt=""/></a></li> <li><a href="#"><img src="img/slidepic5.jpg" alt=""/></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:(0);" class="prev" id="arrLeft"></a> <a href="javascript:;" class="next" id="arrRight"></a> </div> </div> </div> </body> </html>