javascript基础知识之html5轮播图实例讲解(44)
本文实例为大家分享了html5轮播图的具体代码,供大家参考,具体内容如下
1.轮播图的布局:
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> /*去除默认样式*/ *{ margin:0; padding:0; } /*设置div*/ #outer{ width:520px; height:333px; /*设置居中*/ margin:50pxauto; /* *设置背景颜色 */ background-color:greenyellow; /*设置上下内边距*/ padding:10px0; /*为父元素开启相对定位*/ position:relative; /*隐藏溢出的内容*/ overflow:hidden; } /*设置ul*/ #imgList{ /*去除项目符号*/ list-style:none; /*设置ul的宽度*/ width:2600px; /*开启绝对定位*/ position:absolute; /* *通过修改ul的left值,可以切换图片 *10px *2-520px *3-1040px *4-1560px *.... */ left:0px; } /*设置li*/ li{ /*设置元素浮动*/ float:left; /*设置外边距*/ margin:010px; } /*设置导航按钮*/ #nav{ /*开启绝对定位*/ position:absolute; /*定位*/ bottom:20px; /* *#outer宽度520px * *#nav宽度125px * *520-125=395/2=197.5 */ left:197px; } #nava{ /*设置a浮动*/ float:left; /*设置宽和高*/ width:15px; height:15px; /*设置背景颜色*/ background-color:red; /*设置外边距*/ margin:05px; /*设置透明*/ opacity:0.5; filter:alpha(opacity=50); } </style> </head> <body> <!-- 创建一个div作为容器 --> <divid="outer"> <!--创建一个ul,用来保存图片--> <ulid="imgList"> <li><imgsrc="img/1.jpg"/></li> <li><imgsrc="img/2.jpg"/></li> <li><imgsrc="img/3.jpg"/></li> <li><imgsrc="img/4.jpg"/></li> <li><imgsrc="img/5.jpg"/></li> </ul> <!--创建一个div来放导航按钮--> <divid="nav"> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> </div> </div> </body> </html>
2.轮播图的逻辑:
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> /*去除默认样式*/ *{ margin:0; padding:0; } /*设置div*/ #outer{ width:520px; height:333px; /*设置居中*/ margin:50pxauto; /* *设置背景颜色 */ background-color:greenyellow; /*设置上下内边距*/ padding:10px0; /*为父元素开启相对定位*/ position:relative; /*隐藏溢出的内容*/ overflow:hidden; } /*设置ul*/ #imgList{ /*去除项目符号*/ list-style:none; /*设置ul的宽度*/ width:2600px; /*开启绝对定位*/ position:absolute; /* *通过修改ul的left值,可以切换图片 *10px *2-520px *3-1040px *4-1560px *.... */ left:0px; } /*设置li*/ li{ /*设置元素浮动*/ float:left; /*设置外边距*/ margin:010px; } /*设置导航按钮*/ #nav{ /*开启绝对定位*/ position:absolute; /*定位*/ bottom:20px; /* *#outer宽度520px * *#nav宽度125px * *520-125=395/2=197.5 */ left:197px; } #nava{ /*设置a浮动*/ float:left; /*设置宽和高*/ width:15px; height:15px; /*设置背景颜色*/ background-color:red; /*设置外边距*/ margin:05px; /*设置透明*/ opacity:0.5; filter:alpha(opacity=50); } #nava:hover{ background-color:black; } </style> <scripttype="text/javascript"src="js/tools.js"></script> <scripttype="text/javascript"> window.onload=function(){ //获取id为imgList的ul varimgList=document.getElementById("imgList"); //获取所有的图片标签 varimgs=document.getElementsByTagName("img"); //设置ul的宽度 imgList.style.width=520*imgs.length+"px"; //设置导航按钮居中 //获取id为outer的div varouter=document.getElementById("outer"); //获取id为nav的div varnav=document.getElementById("nav"); nav.style.left=(outer.offsetWidth-nav.offsetWidth)/2+"px"; //创建一个变量,来保存当前显示图片的索引 varindex=0; //获取所有的超链接 varlinks=document.getElementsByTagName("a"); //设置对应的超链接变成选中状态 links[index].style.backgroundColor="black"; //开启自动切换图片 autoChange(); /* *点击超链接切换到对应的图片 *点击第一个超链接,切换到第一个图片 *点击第二个超链接,切换到第二个图片 */ //为所有的超链接绑定单击响应函数 for(vari=0;i<links.length;i++){ //在超链接中添加一个属性 links[i].num=i; links[i].onclick=function(){ //当切换图片时,为了不受自动切换的影响需要将其关闭 clearInterval(autoTimer); //获取到当前点击的超链接的索引 //更新当前图片的索引 index=this.num; //切换到对应的图片 /* *切换图片,就是修改imgList的left属性值 *00*-520 *11*-520 *44*-520 */ //imgList.style.left=-520*index+"px"; //设置过渡效果 move(imgList,"left",-520*index,20,function(){ //图片切换完毕,打开自动切换 autoChange(); }); setA(); }; } //定义一个变量,保存自动切换图片的定时器 varautoTimer; /* *定义一个函数,专门用来自动切换图片 */ functionautoChange(){ //开启一个定时器,来负责图片的切换 autoTimer=setInterval(function(){ //索引自增 index++; //判断index值是否合法 index=index%imgs.length; //切换图片 move(imgList,"left",-520*index,20,function(){ //动画执行完毕,切换导航点 setA(); }); },3000); } /* *函数专门用来设置超链接的选中状态的 */ functionsetA(){ /* *因为最后一张图片和第一张是一样的,所以当显示的图片是最后一张时,应该是第一个的超链接变颜色 */ if(index>=imgs.length-1){ index=0; //已经切换到最后一张,瞬间将其切换到第一张 imgList.style.left=0; } /*遍历超链接*/ for(vari=0;i<links.length;i++){ //将所有的超链接的背景颜色都设置为红色 links[i].style.backgroundColor=""; } //将当前选中的超链接设置为黑色 links[index].style.backgroundColor="black"; } }; </script> </head> <body> <!-- 创建一个div作为容器 --> <divid="outer"> <!--创建一个ul,用来保存图片--> <ulid="imgList"> <li><imgsrc="img/1.jpg"/></li> <li><imgsrc="img/2.jpg"/></li> <li><imgsrc="img/3.jpg"/></li> <li><imgsrc="img/4.jpg"/></li> <li><imgsrc="img/5.jpg"/></li> <li><imgsrc="img/1.jpg"/></li> </ul> <!--创建一个div来放导航按钮--> <divid="nav"> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></a> </div> </div> </body> </html>
外部js代码:
/* *定义一个move()函数来执行一些简单的动画效果 *参数: *obj要执行动画的对象 *attr执行动画时要修改的属性 *target执行动画的目标位置 *speed动画执行的速度 *callback回调函数,当动画执行完毕以后,该回调函数会执行 */ functionmove(obj,attr,target,speed,callback){ //关闭之前的定时器 /* *一般都会将定时器的标识作为执行动画对象的属性保存,这样可以确保只有当前对象能访问到定时器 */ clearInterval(obj.timer); //判断向左移还是向右移 //0-->800向右移 //起始位置<目标位置则向右移动,速度为正 //800-->0向左移 //起始位置>目标位置则向左移动,速度为负 //获取元素的起始位置 varcurrent=parseInt(getStyle(obj,attr)); if(current>target){ //起始位置>目标位置则向左移动,速度为负 speed=-speed; } //开启一个定时器,控制box1移动 obj.timer=setInterval(function(){ //获取box1的当前的left值 varoldValue=parseInt(getStyle(obj,attr)); //通过旧值来计算新值 varnewValue=oldValue+speed; //判断newValue是否大于800 /* *如果从0向800,执行动画,则值越来越大 *如果从800向0执行动画,则值越来小 */ if((speed>0&&newValue>target)||(speed<0&&newValue<target)){ newValue=target; } //将box1的left值修改为新值 obj.style[attr]=newValue+"px"; //当box1移动到800px的位置时,停止移动 if(newValue==target){ clearInterval(obj.timer); //调用回调函数 callback&&callback(); } },30); } /* *用来获取任意元素的当前样式 *参数: *obj要获取样式的元素 *name要获取的样式的名字 * *在读取元素的样式时,如果元素没有设置样式, *则火狐、Chrome等浏览器会自动计算元素的样式值 *而IE浏览器,有时用不会自动计算,而是返回默认值,比如宽度会返回auto * */ functiongetStyle(obj,name){ //判断浏览器中是否含有getComputedStyle这个方法 if(window.getComputedStyle){ //支持正常的浏览器 returngetComputedStyle(obj,null)[name]; }else{ //只支持IE returnobj.currentStyle[name]; } } /* *定义一个专门用来向元素中添加class的函数 *参数: *obj要添加class属性的对象 *cn要添加的class的属性值 */ functionaddClass(obj,cn){ //如果元素中有该class则不添加,没有才添加 if(!hasClass(obj,cn)){ obj.className+=""+cn; } } /* *创建一个函数检查一个元素中是否含有指定的class *如果有,则返回true。否则返回false */ functionhasClass(obj,cn){ //创建正则表达式 varreg=newRegExp("\\b"+cn+"\\b"); //返回检查结果 returnreg.test(obj.className); } /* *用来从指定元素中删除class值的方法 */ functionremoveClass(obj,cn){ //要删除一个class,就是将这个class替换为一个空串 //创建正则表达式 varreg=newRegExp("\\b"+cn+"\\b","g"); //判断obj中是否含有这个class if(reg.test(obj.className)){ //将内容替换为空串 obj.className=obj.className.replace(reg,""); } } /* *用来切换元素的class的方法 *如果元素中含有该class,则删除 *如果元素中没有该class,则添加 * */ functiontoggleClass(obj,cn){ //检查obj中是否含有cn if(hasClass(obj,cn)){ //有该class,则删除 removeClass(obj,cn); }else{ //没有该class,则添加 addClass(obj,cn); } }
注:图片自己找
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。