@author QYX
今天课上老师让做一个图片切换，闲的无聊，花了4,5分钟，增加了几个功能，手写了一个工具函数，实现了轮播图，使用定时器自动切换图片，实现点击下方小方块切换相应图片（每个小方块对应一个图片），点击方框时自动切换图片并停止定时器，待选择的图片切换后使用回调函数继续执行轮播功能，类似于电商网站的图片切换模块（当然由于花费时间很短，所以没有进行优化，逃 :)）
提供一下此代码块的代码(有人说这为什么不算项目，因为项目最低都是2000+行起步，所以叫做代码块)
实现此功能只使用了原生JS的原始知识，项目十分简单易学,可供新人练手。
这篇就当我水了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } #outer{ width: 320px; height: 400px; margin: 50px auto; background-color: #9ACD32; /*设置padding*/ padding: 10px 0; position: relative; /*裁剪溢出的内容*/ overflow: hidden; } /*设置list*/ #imgList{ list-style: none; /*设置ul宽度*/ width: 1600px; position: absolute; margin: 0px auto; } #imgList li{ float: left; margin: 0 10px; } #navDiv{ /*开启绝对定位*/ position: absolute; /*设置位置*/ bottom: 15px; left: 117px; } #navDiv a{ float: left; width: 10px; height: 10px; background-color: ##FF0000; /*设置左右外边距*/ margin: 0 5px; opacity: 0.5; /*兼容IE8透明*/ filter: alpha(opactiy=50); background-color: #87CEEB; } #navDiv a:hover{ background-color: #000000; opacity: 0.5; /*兼容IE8透明*/ filter: alpha(opactiy=50); } img{ width: 300px; height: 400px; } </style> <script type="text/javascript"> /** * author:QYX */ window.onload=function() { //imgList的宽度 var imgList=document.getElementById('imgList'); //获取页面中所有的图片 var imgArr=document.getElementsByTagName('img'); imgList.style.width=400*imgArr.length+'px'; /*设置导航按钮*/ var navDiv=document.getElementById('navDiv'); //获取outer var outer=document.getElementById('outer'); navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2; //获取所有的a var allA=document.getElementsByTagName('a'); var index=0; //设置默认选中的效果 allA[index].style.background="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=-320*index+"px"; setA(); move('left',imgList,20,-320*(index),function(){ autoChange(); }); } } autoChange(); function setA() { //判断当前索引是否为最后一张图片 if(index>=imgArr.length-1) { //则将index设置为0 index=0; //通过css将最后一张直接切换为第一章 imgList.style.left=0; } for(var i=0;i<allA.length;i++) { allA[i].style.backgroundColor=""; } //将选中的A设置为黑色 //修改正在选中的A allA[index].style.backgroundColor="black"; }; //定义自动切换定时器标识 var timer; function autoChange() { //开启一个定时器用于定时去切换图片 timer=setInterval(function(){ //使索引自增 index++; index%=imgArr.length; move('left',imgList,20,-320*index,function(){ // for(var i=0;i<allA.length;i++) // { // allA[i].style.backgroundColor=""; // } // //将选中的A设置为黑色 // //修改正在选中的A // allA[index].style.backgroundColor="black"; setA.call(); }); },3000); }; //创建一个方法用来设置选中的A }; function getStyle(obj,name) { //正常浏览器的方式 /** * 对象没找到会报错，属性没找到会返回undefined，所以必须带window * 这种getComputedStyle就成了属性，不会报错 */ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name]; }else{ //IE8的方式 return obj.getComputedStyle[name]; } } /** * @param {Object} attr 要执行的动画的样式 * @param {Object} obj 要执行动画的对象 * @param {Object} speed 移动的速度 * @param {Object} target 执行动画的目标位置（正数向右，负数向左） * @param {Object} callback 回调函数 */ function move(attr,obj,speed,target,callback) { clearInterval(obj.timer); //获取元素目标位置 var current=parseInt(getStyle(obj,attr)); //判断速度的正负值 if(current>target) { //此时速度应为负值 speed=-speed; } obj.timer=setInterval(function(){ //获取obj原来的left值 var oldValue=parseInt(getStyle(obj,attr)); //在旧值的基础上增加 var newval=oldValue+speed; if((speed<0 && newval<target)||(speed>0 && newval>target)) { newval=target; } obj.style[attr]=newval+'px'; if(newval == target) { clearInterval(obj.timer); callback&&callback(); } },30); } </script> </head> <body> <div> <div id="outer"> <ul id="imgList"> <li> <img src="img/1.jpg"/> </li> <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/1.jpg"/> </li> <!--创建导航按钮--> </ul> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html>
实现效果如下:
图片是我女神
轮播图，使用定时器自动切换图片，实现点击下方小方块切换相应图片（每个小方块对应一个图片），点击方框时自动切换图片并停止定时器，待选择的图片切换后使用回调函数继续执行轮播功能。