1.轮播图效果图
2.完整代码如下
<!doctype html><html><head><meta charset="utf-8"><title>轮播图</title><style type="text/css">*{margin:0;padding:0;}/*设置外部div*/#outer{width:447px;height:240px;margin:50px auto;/*居中*/background-color:#0FF;/*设置背景颜色*/padding:10px 0;position:relative;/*父元素div开启相对定位*/overflow:hidden;/*裁剪溢出内容*/}/*设置ul*/#imgList{list-style:none;/*去除项目符合*/position:absolute;/*给ul开启绝对定位*/left:0px;/*设置偏移量，每向左移动447px就会显示下一张图片*/}/*设置图片中的li*/#imgList li{float:left;/*设置浮动*/margin:0 10px;/*设置左右外边距*/}/*设置导航按钮*/#navdiv{position:absolute;/*开启绝对定位*/bottom:15px;/*设置位置*/}#navdiv a{float:left;/*设置超链接浮动*/width:15px;height:15px;background-color:#F00;/*设置背景颜色*/margin:0 5px;/*设置左右外边距*/opacity:0.5;/*设置半透明*//*兼容IE8透明的写法为，filter:alpha(opacity=50)*/}/*设置鼠标移入的效果*/#navdiv a:hover{background-color:#000;}</style><script type="text/javascript" src="myjs/dh.js"></script><script type="text/javascript">window.function(){//获取ulvar imgList=document.getElementById("imgList");//获取页面中所有的图片(即获取img标签)var imgarr=document.getElementsByTagName("img");//设置imgList的宽度imgList.style.width=447*imgarr.length+"px";//设置导航按钮居中//第一步获取导航divvar navdiv=document.getElementById("navdiv");var outer=document.getElementById("outer");//第二步设置left值，left=（outer的宽度-navdiv的宽度）/2navdiv.style.left=(outer.offsetWidth-navdiv.offsetWidth)/2+"px";//默认显示图片的的索引var index=0;//获取所有的avar alla=document.getElementsByTagName("a");//设置默认选中的效果alla[index].style.backgroundColor="#000";//点击超链接切换到指定图片，点击第一个超链接显示第一张图片，点击第二个超链接显示第二张图片//为所有超链接都绑定单击响应事件for(var i=0;i<alla.length;i++){//为每一个超链接添加一个num属性alla[i].num=i;alla[i].onclick=function(){//关闭定时器clearInterval(timer);//获取点击超链接的索引,并将其设置为indexindex=this.num;//切换图片,第一张索引为0，left为0，第二张索引为1，left为-447，第三张索引为2，left为-894//imgList.style.left=-447*index+"px";//设置选中asetA();//使用move函数来切换图片move(imgList,"left",-447*index,20,function(){//动画结束，开启自动切换autoChange();});};}//自动切换图片autoChange();//创建一个方法用来设置选中的afunction setA(){//判断当前索引是否是最后一张图片if(index>=imgarr.length-1){//则将index设置为0index=0;//此时显示的是最后一张图片，而最后一张图片和第一张是一样的通过CSS将最后一张切换成第一张imgList.style.left=0;}//遍历所有的a并将所有的背景颜色都设置为红色for(var i=0;i<alla.length;i++){alla[i].style.backgroundColor="";}//将选中的a设置为黑色alla[index].style.backgroundColor="#000";};var timer;//创建一个函数，用来开启自动切换图片function autoChange(){//开启一个定时器用来定时切换图片timer=setInterval(function(){//使索引自增index++;index=index%imgarr.length;//执行动画,切换图片move(imgList,"left",-447*index,20,function(){//修改导航按钮setA();});},3000);}};</script></head><body><!--创建一个外部的div，来作为大的容器--><div id="outer"><!--创建一个ul，用于放置图片--><ul id="imgList"><li><img src="img/2.jpg"></li><li><img src="img/3.jpg"></li><li><img src="img/4.jpg"></li><li><img src="img/5.jpg"></li><li><img src="img/6.jpg"></li><li><img src="img/2.jpg"></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></body></html>
3.附上引用js部分代码（dh.js）
// JavaScript Document//创建一个可以执行简单动画的函数//参数1：要执行动画的对象（obj）;参数2：要执行动画的样式,可以是left,right,top等（attr）；参数3：执行动画的目标位置（target）；参数4：表示移动的速度正数向右移动，负数向左移动（speed）；参数5：回调函数（callback），这个函数将会在动画执行完毕以后执行function move(obj,attr,target,speed,callback){//在开启一个定时器之前，先关闭上一个元素的定时器clearInterval(obj.timer);//获取元素目前的位置var current=parseInt(getStyle(obj,attr));//判断速度的正负//如果从0向800移动，则speed为正，如果从800向0移动，则speed为负if(current>target){speed=-speed;}//开启一个定时器来实现动画效果//向执行动画的对象中添加一个timer属性值，用来保存它自己的定时器标识obj.timer=setInterval(function(){//获取div的原来的值var oldvalue=parseInt(getStyle(obj,attr));//在旧值的基础上增加var newvalue=oldvalue+speed;//判读newvalue是否大于800if(speed<0 && newvalue<target || speed>0 && newvalue>target){newvalue=target;}//将新值赋给boxobj.style[attr]=newvalue+"px";//当元素移动到800px时，则停止执行动画if(newvalue==target){//达到目标关闭定时器clearInterval(obj.timer);//动画执行完毕，调用回调函数callback && callback();}},30);}//定义一个函数用来获取指定元素的当前样式，参数，obj代表需获取样式的元素，name代表需获取的样式名function getStyle(obj,name){if(window.getComputedStyle){//正常浏览器有getComputedStyle()方法return getComputedStyle(obj,null)[name];}else{//IE8的浏览器没有getComputedStyle()方法return obj.currentStyle[name];}}
4.图片素材
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
