效果（在框内实现图片的轮播，点击小方框跳转图片）：
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);//获取点击超链接的所引,并将其设置为indexindex = this.num;// 切换图片//imgList.style.left = -240 * index + "px";setA();//使用move函数来切换图片move(imgList, "left", -240*index, 25, function(){autoChange();});};}//开启自动切换图片autoChange();// 创建一个方法来设置选中的afunction 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是否大于targetif((newValue > target && speed > 0) || (newValue < target && speed < 0)){newValue = target;}obj.style[attr] = newValue + "px";if(newValue == target){clearInterval(obj.timer);//动画执行完毕调用回调函数callback && callback();}},30); }
