效果（在框内实现图片的轮播，点击小方框跳转图片）： html代码：
<!-- 设置外部div,来作为大的容器 --> <div id="outer"> <!-- 创建ul，放置图片 --> <ul id="imgList"> <li><img src="lbimg/1.png" alt=""></li> <li><img src="lbimg/2.png" alt=""></li> <li><img src="lbimg/3.png" alt=""></li> <li><img src="lbimg/4.png" alt=""></li> <li><img src="lbimg/5.png" alt=""></li> <li><img src="lbimg/1.png" alt=""></li> </ul> <!-- 创建导航按钮 --> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div>css代码：
*{ margin: 0; padding: 0; } #outer{ width: 240px; height: 270px; margin: 50px auto; background-color: crimson; padding: 10px 0; /* 开启相对定位 */ position: relative; /* 裁剪溢出的内容 */ overflow: hidden; } #imgList{ /* 去掉项目符号 */ list-style: none; /* 开启绝对定位 */ position: absolute; /* 设置偏移量 */ left: -480px; } #imgList li{ float: left; margin: 0 10px; } /* 设置导航按钮 */ #navDiv{ /* 开启绝对定位 */ position: absolute; /* 设置位置 */ bottom: 14px; } #navDiv a{ /* 设置超链接浮动 */ float: left; width: 15px; height: 15px; background-color: red; /* 设置左右距离 */ margin: 0 5px; /* 设置透明度 */ opacity: 0.5; /* 兼容IE8透明 */ /* filter: alpha(opacity = 70); */ } /* 设置鼠标移入效果 */ /* #navDiv a:hover{ background-color: rgb(46, 44, 44); } */js代码：
window.onload = function(){ // 设置imgList的高度 var imgList = document.getElementById("imgList"); var imgArr = document.getElementsByTagName("img"); imgList.style.width = 240*imgArr.length + "px"; // 设置导航按钮居中 var navDiv = document.getElementById("navDiv"); var outer = document.getElementById("outer"); navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; // 设置默认选中的效果 var index = 0; var allA = document.getElementsByTagName("a"); allA[index].style.backgroundColor = "black"; // 点击超链接切换到响应的图片 //为所有超链接绑定单击响应函数 for(var i=0; i<allA.length; i++){ // 为每一个超链接添加一个num属性 allA[i].num = i; //为超链接绑定单击响应函数 allA[i].onclick = function(){ clearInterval(timer); //获取点击超链接的所引,并将其设置为index index = this.num; // 切换图片 //imgList.style.left = -240 * index + "px"; setA(); //使用move函数来切换图片 move(imgList, "left", -240*index, 25, function(){ autoChange(); }); }; } //开启自动切换图片 autoChange(); // 创建一个方法来设置选中的a function setA(){ //判断当前索引是否是最后一张图片 if(index >= imgArr.length -1){ index = 0; //此时显示的是最后一张图片，而最后一张图片和第一张一样 //通过css将最后一张切换成第一张 imgList.style.left = 0; } //遍历所有的a并将他们的背景颜色设为红色 for(var i=0; i<allA.length; i++){ allA[i].style.backgroundColor = ""; } //将选中的a设置为黑色 allA[index].style.backgroundColor = "black"; } var timer; //创建一个函数，用来自动切换图片 function autoChange(){ timer = setInterval(function(){ //索引自增 index++; index %= imgArr.length; move(imgList, "left", -240*index, 25, function(){ setA(); }); },2000); } }; //获取样式的方法 function getStyle(obj, name){ //兼容两种浏览器 if(window.getComputedStyle){ return getComputedStyle(obj, null)[name]; }else{ return obj.currentStyle[name]; } } //动画函数 function move(obj, attr, target, speed, callback){ clearInterval(obj.timer); //获取元素目前的位置 var current = parseInt(getStyle(obj, attr)); if(current > target){ //此时速度应为负值 speed = -speed; } //向执行动画的对象中添加一个timer属性，用来保存他自己的标识 obj.timer = setInterval(function(){ //获取box1原来的left值 var oldValue = parseInt(getStyle(obj, attr)); var newValue = oldValue + speed; //向左移动时，判断newValue是否小于target //向右移动时，判断newValue是否大于target if((newValue > target && speed > 0) || (newValue < target && speed < 0)){ newValue = target; } obj.style[attr] = newValue + "px"; if(newValue == target){ clearInterval(obj.timer); //动画执行完毕调用回调函数 callback && callback(); } },30); }