轮播图是我们学习原生js的必经之路
它包含很多基本知识的运用，像this的使用，DOM的操作，还有setInterval的使用和清除，浮动与定位等等，很好的考察了我们的基础知识牢不牢固，
话不多说，直接上图
HTML代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>淘宝轮播图</title> 6 <link rel="stylesheet" href="css/initialize.css"/> 7 <link rel="stylesheet" href="css/tblunbotu.css"/> 8 </head> 9 <body> 10 <div id="container" class="clearFix"> 11 <div id="list" class="clearFix" style="left: -520px"> 12 <img src="img/5.jpg" alt=""/> 13 <img src="img/1.jpg" alt=""/> 14 <img src="img/2.jpg" alt=""/> 15 <img src="img/3.jpg" alt=""/> 16 <img src="img/4.jpg" alt=""/> 17 <img src="img/5.jpg" alt=""/> 18 <img src="img/1.jpg" alt=""/> 19 </div> 20 <div id="buttons" class="clearFix"> 21 <span class="on"></span> 22 <span></span> 23 <span></span> 24 <span></span> 25 <span></span> 26 </div> 27 <a href="javascript:;" id="prev" class="arrow"><</a> 28 <a href="javascript:;" id="next" class="arrow">></a> 29 </div> 30 <script type="text/javascript" src="js/tblunbotu.js"></script> 31 </body> 32 </html>
CSS样式如下：
1 /* 2 第一步：设置外部框的样式 3 第二步: 设置图片框的样式 4 第三步: 设置箭头的样式 5 第四步: 设置小圆点的样式 6 */ 7 #container { 8 margin: 50px auto; 9 position: relative; 10 width: 520px; 11 height: 280px; 12 overflow: hidden; 13 } 14 #list { 15 position: absolute; 16 z-index: 1; 17 width: 3640px; 18 } 19 #list img { 20 float: left; 21 width: 520px; 22 height: 280px; 23 } 24 #buttons { 25 height: 10px; 26 width: 100px; 27 position: absolute; 28 left: 0;/*设置水平垂直居中*/ 29 right: 0;/*设置水平垂直居中*/ 30 margin: 0 auto;/*设置水平垂直居中*/ 31 bottom: 20px; 32 z-index: 2; 33 } 34 35 #buttons span { 36 float: left; 37 margin-right: 5px; 38 width: 10px; 39 height: 10px; 40 border: 1px solid #cccccc; 41 border-radius: 50%; 42 background: #333; 43 cursor: pointer; 44 } 45 #buttons .on { 46 background: orangered; 47 } 48 49 .arrow { 50 width: 40px; 51 height: 40px; 52 display: none; 53 position: absolute; 54 top: 0; /*设置水平垂直居中*/ 55 bottom: 0; /*设置水平垂直居中*/ 56 margin: auto 0; /*设置水平垂直居中*/ 57 font-size: 36px; 58 font-weight: bold; 59 line-height: 39px; 60 text-align: center; 61 color: #fff; 62 background-color: RGBA(0, 0, 0, .3); 63 cursor: pointer; 64 z-index: 2; 65 } 66 .arrow:hover{ 67 background-color: RGBA(0, 0, 0, .7); 68 } 69 #container:hover .arrow { 70 display: block; 71 } 72 73 #prev{ 74 left: 10px; 75 } 76 #next{ 77 right: 10px; 78 }
javascript代码如下
1 /** 2 * Created by zhm on 17.1.15. 3 */ 4 /* 5 *知识点： 6 * this使用 7 * DOM事件 8 * 定时器 9 * 10 * 思路： 11 * （1）设置它左右移动 12 * 问题：传入数字为NAN?? 13 * 解决：在页面中增加属性style：left:0 14 * （2）平滑移动（移动时间固定，每次移动的距离不一样） 15 * 问题：连续点击出现晃动？---设置标志位 16 * 出现空白页？？--- 第一张图片前加上最后一张，最后一张图片前加上第一张 17 * 在类list的标签中增加属性style：left:-520px; 18 * 设置无限滚动判断 19 * 20 * （3）设置小圆点 21 * 首先将所有的类置为空，当前类置为on 22 * 绑定小圆点和图片 23 * 绑定小圆点和左右箭头 24 * 设置定时器，鼠标划上去停止，移开自动轮播 25 * 26 * */ 27 28 29 //1.获取元素 30 var container = document.getElementById("container"); 31 var list = document.getElementById("list"); 32 var prev = document.getElementById("prev"); 33 var next = document.getElementById("next"); 34 var buttons = document.getElementById('buttons').getElementsByTagName('span'); 35 var timer = null; 36 var timer2 = null; 37 var flag = true; 38 var index =0; 39 40 41 42 //2.设置函数 43 function moveImg(dis) { 44 var time = 400;//运动的总时间 45 var eachTime = 10;//每次小移动的时间 46 var eachDis = dis/(time/eachTime);//每次小移动的距离 47 var newWeizhi = parseInt(list.style.left) + dis;//新位置 48 flag = false; 49 50 51 function eachMove(){ 52 if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){ 53 list.style.left = parseInt(list.style.left) + eachDis + 'px'; 54 }else { 55 flag = true; 56 clearInterval(timer); 57 list.style.left = newWeizhi + 'px'; 58 //无限滚动判断 59 if (newWeizhi == 0) { 60 list.style.left = -2600 + 'px'; 61 } 62 if (newWeizhi == -3120) { 63 list.style.left = -520 + 'px'; 64 } 65 } 66 67 } 68 timer = setInterval(eachMove, 10); 69 } 70 71 //3.设置点击切换图片 72 next.onclick = function () { 73 if(!flag) return; 74 moveImg(-520); 75 //绑定箭头和小圆点 76 if (index == 4) { 77 index = 0; 78 } else { 79 index++; 80 } 81 buttonsShow(); 82 }; 83 prev.onclick = function () { 84 if(!flag) return; 85 moveImg(520); 86 87 //绑定箭头和小圆点 88 if (index == 0) { 89 index = 4; 90 } else { 91 index--; 92 } 93 buttonsShow(); 94 95 }; 96 97 //4.设置小圆点的绑定 98 99 function buttonsShow() { 100 //将之前的小圆点的样式清除 101 for (var i = 0; i < buttons.length; i++) { 102 if (buttons[i].className == "on") { 103 buttons[i].className = ""; 104 break; 105 } 106 } 107 buttons[index].className = "on"; 108 } 109 110 for(var i = 0 ;i<buttons.length;i++){ 111 buttons[i].value = i; 112 //使用自执行函数解决i的赋值问题 113 (function(){ 114 buttons[i].onclick = function(){ 115 if(this.value == index) return; 116 var offset = (this.value - index)* -520; 117 moveImg(offset); 118 index = this.value; 119 buttonsShow(); 120 } 121 })(); 122 } 123 124 //5.设置自动轮播 125 timer2 = setInterval(next.onclick,1500); 126 container.onmouseover = function(){ 127 clearInterval(timer2); 128 }; 129 container.onmouseout = function(){ 130 timer2 = setInterval(next.onclick,1000); 131 };
有什么好的建议可以留言，相互讨论哟，一起进步~fighting~~
源码下载：http://files.cnblogs.com/files/Hmin2199/%E6%B7%98%E5%AE%9D%E8%BD%AE%E6%92%AD%E5%9B%BE.zip