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);
}
}
注：图片自己找
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。