1.基础知识(应用到的基础知识)
(1)基础
①js 函数嵌套，模块化，全局变量，局部变量（查看其它随笔）className属性，onmouseover当鼠标移入元素，onmouseout当鼠标在元素以外，setinterval()定时器，clearInterval清除定时器，
②css 定位下的left，top，right，bottom遵循原则(其它随笔)，background注意事项，
2.使用数组的添加和删除，实现方框位置的替换
(1)数组的添加，修改元素
①js 代码实现 (实现原理:通过获取页面的元素，将其添加到数组中，点击按钮 数组的进行顺时针旋转)
<script> window.onload = function(){ var oDiv = document.getElementById('div1'); var oInput = document.getElementById('input1'); oInput.onclick = function(){ var arr=oDiv.innerHTML.split(','); //将页面的元素用逗号隔开的数组(这里需要注意div中用什么隔开，split中就必须用什么符号组成数组) arr.push(arr[0]); //将第一个元素添加到数组最后面 arr.shift(arr); //将第一个元素删除 oDiv.innerHTML=arr; } } </script>
②html 页面
<body> <div id="div1">1,2,3,4</div> <input type="button"id="input1" value="切换" /> </body>
③ui 效果图
(2)通过上面的例子实现下面的简易轮播
①js 代码(实现原理:由上可知,添加上了一个时间定时器，点击按钮将图片顺时针，逆时针转动)
<script type="text/javascript"> window.onload=function(){ var oInput = document.getElementsByTagName('input'); var oDiv = document.getElementsByTagName('div'); var arr=[]; for(var i=0;i<oDiv.length;i++){ //使用getStyle函数获取内联样式中的left,top,保存为二维函数 arr.push( [getStyle(oDiv[i],'left'),getStyle(oDiv[i],'top')]); } //点击右按钮图片向右面转换 oInput[1].onclick = function(){ //将arr[0]添加到函数的最后面，将函数的第一个元素删除 arr.push(arr[0]); arr.shift(); for (var i=0;i<oDiv.length;i++) { //遍历去arr这个二维数组的值，对应left，top oDiv[i].style.left = arr[i][0]; oDiv[i].style.top = arr[i][1]; } } //点击左按钮图片向左面转换 oInput[0].onclick = function(){ //在数组头部添加一个元素，删除数组最后一个元素 arr.unshift(arr[arr.length-1]); arr.pop(); for (var i=0;i<oDiv.length;i++) {//遍历去arr这个二维数组的值，对应left，top oDiv[i].style.left = arr[i][0]; oDiv[i].style.top = arr[i][1]; } console.log(arr); } //每隔五秒图片移动一下 function changeStyle(){ arr.push(arr[0]); arr.shift(); for(var i=0;i<oDiv.length;i++){ oDiv[i].style.left = arr[i][0]; oDiv[i].style.top = arr[i][1]; } } setInterval(changeStyle,1000); //getStyle函数是js的style属性可以获得html标签的样式，但是不能获取非行间样式。obj表示那个元素，attr表示那个样式 function getStyle(obj,attr){ //定义getStyle方法，否者未定义 if(obj.currentStyle){//ie下 return obj.currentStyle[attr]; }else{//ff下 return getComputedStyle(obj,false)[attr]; } } } </script>
② html 页面
<body> <input type="button" value="←" /> <input type="button" value="→" /> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
③ css 样式
<style> body{ position: relative; } .box1{ height: 100px;width: 100px;background-image: url(../../img/1.jpeg);position:absolute;top: 100px;left: 100px; } .box2{ height: 100px;width: 100px;background-image: url(../../css3/images/1.jpg);position:absolute;top: 80px;left: 220px; } .box3{ height: 100px;width: 100px;background-image: url(../../css3/images/2.jpg);position:absolute;top: 100px;left:340px; } </style>
④ ui 显示效果
3.实现完美轮播
①实现原理:
a、实现鼠标进入后离开图片开始轮播，触发事件main.onmouseover,main.onmouseout
b、给每个span赋予一个id使，通过id对应图片，实现点击span图片转换
c、点击左右按钮实现图片左移动，右移动
实现步骤：a.创建函数slideImg函数(判断鼠标移入，移除) b.创建changImg(点击圆点切换图片，以及方向键切换图片) c.点击右，左切换图片 d.index(全局变量) 和 i(局部变量) 变量，正好数值错开，才能使用以下代码切换样式，以至于图片的改变
for(var i=0;i<oDivLength;i++){
oDiv[i].style.display="none";
oSpan[i].className ="";
}
oDiv[index].style.display="block";
oSpan[index].className ="active";
② js 代码
//封装一个getElementById的方法 function byId(id){ return typeof(id) === "string"?document.getElementById(id):id; } //图片轮播 var index = 0, //看图片轮播到哪里 timer = null, //添加定时器 oDiv = byId('banner').getElementsByTagName('div'), //获取图片div oDivLength = oDiv.length,//获取图片个数 oSpan = byId('dots').getElementsByTagName('span'), next = byId('next'), prev =byId('prev'); console.log(prev); function slideImg(){ var main = byId('main'); //获取外框 //滑过清除定时器，离开定时器继续 main.onmouseover = function(){ //滑过清除定时器 if(timer) clearInterval(timer) //清除轮播 } main.onmouseout = function(){ //事件 //离开定时器开始 timer = setInterval(function(){ index++;//获取当前图片的下标 if(index >= oDivLength){ index=0; } changeImg(); //图片属性改变显示其他图片 },2000) } //自动main上触发鼠标离开事件 main.onmouseout(); //方法 //遍历所有点击，需要绑定点击事件，点击圆点切换图片 for( var d=0;d<oDivLength;d++){ //给所有span添加一个id的属性，值为d，作为当前span的索引 oSpan[d].id = d; oSpan[d].onclick = function(){ //改变index为当前span的索引 //alert(this.id); index = this.id; //实现按钮active 改变this.className = "active"; 但是不写在这 //调用changeImg,实现图片切换 changeImg() } } } // 下一张 next.onclick = function(){ index++; if(index>=oDivLength) index=0; changeImg(); } // 上一张 prev.onclick = function(){ index--; if(index<0) index=oDivLength-1; changeImg(); } function changeImg(){ //遍历banner下所有div，以及dots下所有的span，将div其隐藏，将span清除类active(解决图片轮播一遍后，不会轮播第二遍) for(var i=0;i<oDivLength;i++){ oDiv[i].style.display="none"; oSpan[i].className = ""; } //通过display：block切换图片，和当前span，activ将其显示出来 oDiv[index].style.display="block"; oSpan[index].className ="active"; } slideImg();
③html 代码
<div class="main" id="main"> <div class="banner" id="banner"> <a href="#"> <div class="banner-slide slide1 slide-active"></div> </a> <a href="#"> <div class="banner-slide slide2"></div> </a> <a href="#"> <div class="banner-slide slide3"></div> </a> </div> <!--上一张图 下一张图--> <a href="javascript:void(0)" class="button prev" id="prev"></a> <a href="javascript:void(0)" class="button next" id="next"></a> <!--圆点导航--> <div class="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div>
④ css 代码(实现原理:通过定位将图片全部覆盖，并设置单独属性display:none实现图片隐藏，后序通过改变display的值，实现图片切换)
<style> *{ margin: 0; padding: 0; } ul{ list-style: none; } body{ font-family: "微软雅黑"; color: #CCCCCC; } .main{ height: 460px; width: 1200px; margin: 30px auto; overflow: hidden; position:relative;/*左右按钮相对定位*/ } .banner{ height: 460px; width: 1200px; overflow: hidden; position: relative; /*图片相对定位*/ } .banner-slide{ height: 460px; width: 1200px; position: absolute; background-repeat: no-repeat; display: none; } .slide1{ background-image: url(img/21557.png); background-size: 100% 100%; } .slide2{ background-image: url(img/31145.png); background-size: 100% 100%; } .slide3{ background-image: url(img/卷毛.jpg); background-size: 100% 100%; } .slide-active{ display: block; } /*按钮区域*/ .button{ position: absolute; left: 0px; top: 50%; margin-top: -40px; background: url(img/arrow.png) no-repeat center center; width: 40px; height: 80px; } .button:hover{ /*background: #CCCCCC;*/ background-color: #333333;/*使用时需要注意background以及bakcgorund-color*/ opacity: 0.8; filter: alpha(opacity-80);/*为了浏览器兼容*/ } .prev{ transform: rotate(180deg); } .next{ left:auto; right: 0; } /*圆点属性*/ .dots{ position: absolute; right: 0; bottom: 24px; text-align: right; } .dots span{ display: inline-block; height: 12px; width: 12px; line-height: 12px;/*居中对齐*/ border-radius: 50%; background:rgba(7,17,27,0.4); box-shadow: 0 0 0 2px rgba(255,255,255,0.8); margin-left: 8px; cursor: pointer; } .dots span.active{ box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset; background: #fff; } </style>
⑤ 效果图实现
①②③④⑤⑥⑦⑧