javascript基础知识之html5轮播图实例讲解（44）

更新时间：2020-04-23 20:20:01 作者：startmvc

本文实例为大家分享了html5轮播图的具体代码，供大家参考，具体内容如下1.轮播图的布局

本文实例为大家分享了html5轮播图的具体代码，供大家参考，具体内容如下

1.轮播图的布局：


<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
 
 /*去除默认样式*/ 
 *{ 
 margin: 0; 
 padding: 0; 
 } 
 
 /*设置div*/ 
 #outer{ 
 width: 520px; 
 height: 333px; 
 /*设置居中*/ 
 margin: 50px auto; 
 /* 
 * 设置背景颜色 
 */ 
 background-color: greenyellow; 
 /*设置上下内边距*/ 
 padding: 10px 0; 
 /*为父元素开启相对定位*/ 
 position: relative; 
 /*隐藏溢出的内容*/ 
 overflow: hidden; 
 } 
 
 /*设置ul*/ 
 #imgList{ 
 /*去除项目符号*/ 
 list-style: none; 
 /*设置ul的宽度*/ 
 width: 2600px; 
 /*开启绝对定位*/ 
 position: absolute; 
 
 /* 
 * 通过修改ul的left值，可以切换图片 
 * 1 0px 
 * 2 -520px 
 * 3 -1040px 
 * 4 -1560px 
 * .... 
 */ 
 left: 0px; 
 } 
 
 /*设置li*/ 
 li{ 
 /*设置元素浮动*/ 
 float: left; 
 /*设置外边距*/ 
 margin: 0 10px; 
 } 
 
 
 /*设置导航按钮*/ 
 #nav{ 
 /*开启绝对定位*/ 
 position: absolute; 
 /*定位*/ 
 bottom: 20px; 
 
 /* 
 * #outer 宽度 520px 
 * 
 * #nav 宽度 125px 
 * 
 * 520 - 125 = 395/2 = 197.5 
 */ 
 left: 197px; 
 
 
 } 
 
 #nav a{ 
 /*设置a浮动*/ 
 float: left; 
 /*设置宽和高*/ 
 width: 15px; 
 height: 15px; 
 
 /*设置背景颜色*/ 
 background-color: red; 
 
 /*设置外边距*/ 
 margin: 0 5px; 
 
 /*设置透明*/ 
 opacity: 0.5; 
 filter: alpha(opacity=50); 
 } 
 
 
 </style> 
 </head> 
 <body> 
 
 <!-- 
 创建一个div作为容器 
 --> 
 <div id="outer"> 
 
 <!--创建一个ul，用来保存图片--> 
 <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/5.jpg" /></li> 
 </ul> 
 
 <!--创建一个div来放导航按钮--> 
 <div id="nav"> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 </div> 
 
 </div> 
 
 </body> 
</html>

2.轮播图的逻辑：


<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
 
 /*去除默认样式*/ 
 *{ 
 margin: 0; 
 padding: 0; 
 } 
 
 /*设置div*/ 
 #outer{ 
 width: 520px; 
 height: 333px; 
 /*设置居中*/ 
 margin: 50px auto; 
 /* 
 * 设置背景颜色 
 */ 
 background-color: greenyellow; 
 /*设置上下内边距*/ 
 padding: 10px 0; 
 /*为父元素开启相对定位*/ 
 position: relative; 
 /*隐藏溢出的内容*/ 
 overflow: hidden; 
 } 
 
 /*设置ul*/ 
 #imgList{ 
 /*去除项目符号*/ 
 list-style: none; 
 /*设置ul的宽度*/ 
 width: 2600px; 
 /*开启绝对定位*/ 
 position: absolute; 
 
 /* 
 * 通过修改ul的left值，可以切换图片 
 * 1 0px 
 * 2 -520px 
 * 3 -1040px 
 * 4 -1560px 
 * .... 
 */ 
 left: 0px; 
 } 
 
 /*设置li*/ 
 li{ 
 /*设置元素浮动*/ 
 float: left; 
 /*设置外边距*/ 
 margin: 0 10px; 
 } 
 
 
 /*设置导航按钮*/ 
 #nav{ 
 /*开启绝对定位*/ 
 position: absolute; 
 /*定位*/ 
 bottom: 20px; 
 
 /* 
 * #outer 宽度 520px 
 * 
 * #nav 宽度 125px 
 * 
 * 520 - 125 = 395/2 = 197.5 
 */ 
 left: 197px; 
 } 
 
 #nav a{ 
 /*设置a浮动*/ 
 float: left; 
 /*设置宽和高*/ 
 width: 15px; 
 height: 15px; 
 
 /*设置背景颜色*/ 
 background-color: red; 
 
 /*设置外边距*/ 
 margin: 0 5px; 
 
 /*设置透明*/ 
 opacity: 0.5; 
 filter: alpha(opacity=50); 
 } 
 
 #nav a:hover{ 
 background-color: black; 
 } 
 
 
 </style> 
 
 <script type="text/javascript" src="js/tools.js"></script> 
 
 <script type="text/javascript"> 
 
 window.onload = function(){ 
 
 //获取id为imgList的ul 
 var imgList = document.getElementById("imgList"); 
 //获取所有的图片标签 
 var imgs = document.getElementsByTagName("img"); 
 //设置ul的宽度 
 imgList.style.width = 520 * imgs.length + "px"; 
 
 
 //设置导航按钮居中 
 //获取id为outer的div 
 var outer = document.getElementById("outer"); 
 //获取id为nav的div 
 var nav = document.getElementById("nav"); 
 
 nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px"; 
 
 
 //创建一个变量，来保存当前显示图片的索引 
 var index = 0; 
 
 //获取所有的超链接 
 var links = document.getElementsByTagName("a"); 
 
 //设置对应的超链接变成选中状态 
 links[index].style.backgroundColor = "black"; 
 
 //开启自动切换图片 
 autoChange(); 
 
 
 /* 
 * 点击超链接切换到对应的图片 
 * 点击第一个超链接，切换到第一个图片 
 * 点击第二个超链接，切换到第二个图片 
 */ 
 
 //为所有的超链接绑定单击响应函数 
 for(var i=0 ; i<links.length ; i++){ 
 
 //在超链接中添加一个属性 
 links[i].num = i; 
 
 links[i].onclick = function(){ 
 
 //当切换图片时，为了不受自动切换的影响需要将其关闭 
 clearInterval(autoTimer); 
 
 //获取到当前点击的超链接的索引 
 //更新当前图片的索引 
 index = this.num; 
 
 //切换到对应的图片 
 /* 
 * 切换图片，就是修改imgList的left属性值 
 * 0 0*-520 
 * 1 1*-520 
 * 4 4*-520 
 */ 
 //imgList.style.left = -520*index + "px"; 
 //设置过渡效果 
 move(imgList , "left" , -520*index , 20 , function(){ 
 //图片切换完毕，打开自动切换 
 autoChange(); 
 }); 
 
 setA(); 
 }; 
 } 
 
 //定义一个变量，保存自动切换图片的定时器 
 var autoTimer; 
 
 /* 
 * 定义一个函数，专门用来自动切换图片 
 */ 
 function autoChange(){ 
 
 //开启一个定时器，来负责图片的切换 
 autoTimer = setInterval(function(){ 
 
 //索引自增 
 index++; 
 
 //判断index值是否合法 
 index = index % imgs.length; 
 
 
 //切换图片 
 move(imgList , "left" , -520*index , 20 , function(){ 
 //动画执行完毕，切换导航点 
 setA(); 
 }); 
 
 },3000); 
 
 } 
 
 
 /* 
 * 函数专门用来设置超链接的选中状态的 
 */ 
 function setA(){ 
 
 /* 
 * 因为最后一张图片和第一张是一样的，所以当显示的图片是最后一张时，应该是第一个的超链接变颜色 
 */ 
 if(index >= imgs.length - 1){ 
 index = 0; 
 
 //已经切换到最后一张，瞬间将其切换到第一张 
 imgList.style.left = 0; 
 
 } 
 
 /*遍历超链接*/ 
 for(var i=0 ; i<links.length ; i++){ 
 //将所有的超链接的背景颜色都设置为红色 
 links[i].style.backgroundColor = ""; 
 } 
 
 //将当前选中的超链接设置为黑色 
 links[index].style.backgroundColor = "black"; 
 
 } 
 
 
 
 }; 
 
 
 </script> 
 
 </head> 
 <body> 
 
 <!-- 
 创建一个div作为容器 
 --> 
 <div id="outer"> 
 
 <!--创建一个ul，用来保存图片--> 
 <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/5.jpg" /></li> 
 <li><img src="img/1.jpg" /></li> 
 </ul> 
 
 <!--创建一个div来放导航按钮--> 
 <div id="nav"> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
 </div> 
 
 </div> 
 
 </body> 
</html>

外部js代码：


/* 
 * 定义一个move()函数来执行一些简单的动画效果 
 * 参数： 
 * obj 要执行动画的对象 
 * attr 执行动画时要修改的属性 
 * target 执行动画的目标位置 
 * speed 动画执行的速度 
 * callback 回调函数，当动画执行完毕以后，该回调函数会执行 
 */ 
function move(obj, attr, target, speed, callback) { 
 //关闭之前的定时器 
 /* 
 * 一般都会将定时器的标识作为执行动画对象的属性保存，这样可以确保只有当前对象能访问到定时器 
 */ 
 clearInterval(obj.timer); 
 
 //判断向左移还是向右移 
 //0 --> 800 向右移 
 //起始位置 < 目标位置 则向右移动，速度为正 
 //800 --> 0 向左移 
 //起始位置 > 目标位置 则向左移动，速度为负 
 
 //获取元素的起始位置 
 var current = parseInt(getStyle(obj, attr)); 
 
 if(current > target) { 
 //起始位置 > 目标位置 则向左移动，速度为负 
 speed = -speed; 
 } 
 
 //开启一个定时器，控制box1移动 
 obj.timer = setInterval(function() { 
 
 //获取box1的当前的left值 
 var oldValue = parseInt(getStyle(obj, attr)); 
 
 //通过旧值来计算新值 
 var newValue = 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 
 * 
 */ 
function getStyle(obj, name) { 
 
 //判断浏览器中是否含有getComputedStyle这个方法 
 if(window.getComputedStyle) { 
 //支持正常的浏览器 
 return getComputedStyle(obj, null)[name]; 
 } else { 
 //只支持IE 
 return obj.currentStyle[name]; 
 } 
 
} 
 
/* 
 * 定义一个专门用来向元素中添加class的函数 
 * 参数： 
 * obj 要添加class属性的对象 
 * cn 要添加的class的属性值 
 */ 
function addClass(obj, cn) { 
 
 //如果元素中有该class则不添加，没有才添加 
 if(!hasClass(obj, cn)) { 
 obj.className += " " + cn; 
 } 
 
} 
 
/* 
 * 创建一个函数检查一个元素中是否含有指定的class 
 * 如果有，则返回true。否则返回false 
 */ 
function hasClass(obj, cn) { 
 
 //创建正则表达式 
 var reg = new RegExp("\\b" + cn + "\\b"); 
 
 //返回检查结果 
 return reg.test(obj.className); 
} 
 
/* 
 * 用来从指定元素中删除class值的方法 
 */ 
function removeClass(obj, cn) { 
 
 //要删除一个class，就是将这个class替换为一个空串 
 //创建正则表达式 
 var reg = new RegExp("\\b" + cn + "\\b", "g"); 
 
 //判断obj中是否含有这个class 
 
 if(reg.test(obj.className)) { 
 //将内容替换为空串 
 obj.className = obj.className.replace(reg, ""); 
 } 
} 
 
/* 
 * 用来切换元素的class的方法 
 * 如果元素中含有该class，则删除 
 * 如果元素中没有该class，则添加 
 * 
 */ 
function toggleClass(obj, cn) { 
 //检查obj中是否含有cn 
 if(hasClass(obj, cn)) { 
 //有该class，则删除 
 removeClass(obj, cn); 
 } else { 
 //没有该class，则添加 
 addClass(obj, cn); 
 } 
 
}

注：图片自己找

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。