1、轮播图.html(图片可自己修改)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图</title> </head> <link rel="stylesheet" type="text/css" href="css/轮播图.css"/> <body> <div id="outer"> <ul id="imgList"> <li><img src="img/唯美1.jpg" id="imgID"/></li> <li><img src="img/唯美2.jpg" id="imgID"/></li> <li><img src="img/唯美3.jpg" id="imgID"/></li> <li><img src="img/唯美4.jpg" id="imgID"/></li> <li><img src="img/唯美5.jpg" id="imgID"/></li> <li><img src="img/唯美1.jpg" id="imgID"/></li> </ul> <!--<a id="left"><</a> <a id="right">></a>--> <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> <script type="text/javascript" src="js/tools.js" ></script> <script type="text/javascript" src="js/轮播图.js"></script> </html>
2、tools.js
/** * 用来获取指定元素的当前样式 * 参数： * 1、obj 要获取样式的元素 * 2、name 要获取的样式名 */ function getStyle(obj,name){ if(window.getComputedStyle){ //正常浏览器的方式，具有getComputerStyle()方法 return getComputedStyle(obj,null)[name]; }else{ //IE8方式，没有getComputerStyle()方法 return obj.currentStyle[name]; } } /** * 用来执行简单动画的函数 * 参数 * 1、obj：要执行动画的对象 * 2、attr：要执行动画的样式 比如：left、right、width、height * 3、target：执行动画的目标位置 * 4、speed：移动速度(整数向右移动，负数向左) * 5、callback：回调函数，这个函数会在动画执行完毕以后执行 */ 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(){ var oldValue = parseInt(getStyle(obj,attr)); var newValue = oldValue + speed; /** * 判断newValue和target的关系 * 向左移动时需要判断newValue是否小于target * 向右移动时需要判断newValue是否大于target */ if((speed<0 && newValue<target) || (speed > 0 && newValue>target) ){ newValue = target; } obj.style[attr] = newValue+"px"; //元素到达target停止动画 if(newValue == target){ //到达目的地，停止定时器 clearInterval(obj.timer); //动画执行完毕，有回调函数时调用回调函数 callback && callback(); } },30); }
3、轮播图.js
/*设置装图片ul的宽度 */ var imgList = document.getElementById("imgList"); //获取页面中所有的img标签 var imgArr = document.getElementsByTagName("img"); //设置imgList的宽度 imgList.style.width = 800*imgArr.length+"px"; /*设置导航按钮居中*/ //获取navDiv var navDiv = document.getElementById("navDiv"); //获取outer var outer = document.getElementById("outer"); //设置navDiv的left值 navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; //显示图片的索引 var index=0; //获取所有a 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); //将点击超链接的num属性赋值给index以便切换图片 index = this.num; //修改点击a之后的样式 setA(); //切换图片 /* * 第一张：0 0 * 第二张：1 -800 * 第三张：2 -1600 */ // imgList.style.left = -800*index+"px"; //使用tools.js中的move函数进行动画切换图片 move(imgList,"left",-800*index,50,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++){ //因为css中有默认红色，这里设置为空串是为了防止a:hover之后颜色失效 allA[i].style.backgroundColor = ""; } //将选中的a设置为黑色 allA[index].style.backgroundColor = "black"; }; var timer; //创建一个函数用来开启自动切换图片 function autoChange(){ //开启一个定时器，用来定时切换图片 timer = setInterval(function(){ //使索引自增 index++; index %= imgArr.length; //执行动画，切换图片 move(imgList,"left",-800*index,50,function(){ //修改导航点 setA(); }); },3000); }
4、轮播图.css
*{ margin: 0; padding: 0; } #outer{ width: 800px; height: 500px; border: 1px solid red; margin: 100px auto; position: relative; overflow: hidden; cursor:pointer; } #imgList{ list-style: none; /*开启绝对定位*/ position: absolute; } #imgList li{ float: left; } #outer img{ width: 800px; height: 500px; } /*设置导航按钮*/ #navDiv{ position: absolute; bottom: 20px; } #navDiv a{ /*开启浮动*/ float: left; /*开启浮动后行内元素则变为了块元素，可以设置宽高*/ width: 25px; height: 25px; background-color: red; /*设置左右边距*/ margin: 0 5px; /*设置透明*/ opacity: 0.5; /*兼容IE8透明*/ filter: alpha(opacity=50); } #navDiv a:hover{ background-color: black; }