之前一直都是用jquery写，没有尝试过原生的javascript，今天尝试着弄了一下，代码真多，注释添加的很详细，供学习交流.....
写的时候发现一些小问题：
1、javascript获取div宽高时，不能使用div.style.width等，弹窗alert(div.style.width);时会发现是一个空值，那是什么原因呢？
div.style.width是给div赋值宽，或者改变它的宽度
那么如何获取div宽呢？
a.<div id="container" style="600px;">给div添加内联样式，div.style.width，可以获取到内联样式的宽度。
b.查了一下网上说需要用div.offsetWidth,但是有点问题，如果给container加border时，offsetWidth是获取到container的宽度+border的宽度，这一点需要注意。
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>焦点轮播图</title> </head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="1"/> <img src="img/1.jpg" alt="1"/> <img src="img/2.jpg" alt="2"/> <img src="img/3.jpg" alt="3"/> <img src="img/4.jpg" alt="4"/> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="5"/> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> </body> </html>
css:
1 <style type="text/css"> 2 *{ margin: 0; padding: 0; text-decoration: none;} 3 body { padding: 20px;} 4 #container { width: 600px; height: 400px; overflow: hidden; position: relative; cursor:pointer;} 5 #list { width: 4200px; height: 400px; position: absolute; z-index: 1;} 6 #list img { float: left;} 7 #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;} 8 #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;} 9 #buttons .on { background: orangered;} 10 .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;} 11 .arrow:hover { background-color: RGBA(0,0,0,.7);} 12 #container:hover .arrow { display: block;} 13 #prev { left: 20px;} 14 #next { right: 20px;} 15 </style>
javascript:
1 <script type="text/javascript"> 2 3 window.onload = function () { 4 var container = document.getElementById('container'); //获取容器元素 5 var list = document.getElementById('list'); //获取包括图片列表容器元素 6 var buttons = document.getElementById('buttons').getElementsByTagName('span'); //获取存放按钮buttons中的sapn元素,返回值为数组形式 7 var prev = document.getElementById('prev'); //左箭头 8 var next = document.getElementById('next'); //右箭头 9 var index = 1; //小圆点索引 10 var len = 5; 11 var animated = false; 12 var interval = 3000; 13 var timer; //存放定时器 14 15 var imgWidth=container.offsetWidth; //获取到container容器的宽度 16 17 //添加事件绑定,点击next触发函数 18 //A 点击右箭头 19 next.onclick=function(){ 20 if(index==len){ 21 index=1; 22 }else{ 23 index += 1; //D 24 } 25 //list.style.left=parseInt(list.style.left)-imgWidth+"px"; 26 animate(-imgWidth); //C调用函数传参 27 showButton(); //D 28 } 29 //B 点击左箭头 30 prev.onclick=function(){ 31 if(index==1){ 32 index=len; 33 }else{ 34 index -= 1; //D 35 } 36 //list.style.left=parseInt(list.style.left)+imgWidth+"px"; 37 animate(imgWidth); //C 38 showButton(); //D 39 } 40 41 //C 提取出一个公共函数,图片切换显示 42 function animate(offset){ 43 var newleft=parseInt(list.style.left)+offset; //由A，B中提取公用 44 list.style.left=newleft+"px"; //替换掉list.style.left，一个新的值 45 if( newleft > -imgWidth ){ 46 list.style.left = -(imgWidth*len) + 'px'; 47 } 48 if( newleft < -(imgWidth*len) ){ 49 list.style.left= -imgWidth + 'px'; 50 } 51 } 52 53 //D 亮起小圆点 54 function showButton(){ 55 //关掉其它的按钮， 56 for(var i = 0; i < buttons.length; i++){ 57 if(buttons[i].className=="on"){ 58 buttons[i].className=""; 59 break; 60 } 61 } 62 //只让对应的显示 63 buttons[index-1].className="on"; 64 } 65 66 //------------------------我是一条分隔线--------------------- 67 //E 按钮切换,计算对应图片的偏移量 （目标值-原始值）*（-container宽度） 68 for(var i = 0; i < buttons.length; i++){ 69 buttons[i].onclick=function(){ 70 //优化代码,刚学不懂可不用在意 71 if (this.className=='on') { 72 return; 73 } 74 75 //注意span中的index属性是自己定义的，与class，id等都是不同的 76 //getAttribute可以获取自定义属性，也可获取自带属性 77 var myIndex=parseInt(this.getAttribute('index')); //点击的当前的值,即原始值 78 var offset=-imgWidth*(myIndex-index); //偏移量,index是小圆点索引，不同于span中index属性，即目标值 79 animate(offset); 80 index=myIndex; //切换完之后归位 81 showButton(); 82 } 83 } 84 85 //------------------------我是一条分隔线--------------------- 86 // F 定时轮播 87 function play(){ 88 timer=setInterval(function(){ 89 next.onclick(); 90 },3000); 91 } 92 93 //清除定时器 94 function stop(){ 95 clearInterval(timer); 96 } 97 98 container.onmouseover=stop; 99 container.onmouseout=play; 100 play(); 101 } 102 </script>