javascript基础知识之html5轮播图实例讲解（44）
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了javascript基础知识之html5轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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 = -520index + "px";
//设置过渡效果
move(imgList , "left" , -520index , 20 , function(){
//图片切换完毕，打开自动切换
autoChange();
});
setA();
};
}
//定义一个变量，保存自动切换图片的定时器
var autoTimer;
/
定义一个函数，专门用来自动切换图片
/
function autoChange(){
//开启一个定时器，来负责图片的切换
autoTimer = setInterval(function(){
//索引自增
index++;
//判断index值是否合法
index = index % imgs.length;
//切换图片
move(imgList , "left" , -520index , 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属性的对象
要添加的class的属性值
/
function addClass(obj, ) {
//如果元素中有该class则不添加，没有才添加
if(!hasClass(obj, )) {
obj.className += " " + ;
}
}
/
创建一个函数检查一个元素中是否含有指定的class
如果有，则返回true。否则返回false
/
function hasClass(obj, ) {
//创建正则表达式
var reg = new RegExp("\\b" + + "\\b");
//返回检查结果
return reg.test(obj.className);
}
/
用来从指定元素中删除class值的方法
/
function removeClass(obj, ) {
//要删除一个class，就是将这个class替换为一个空串
//创建正则表达式
var reg = new RegExp("\\b" + + "\\b", "g");
//判断obj中是否含有这个class
if(reg.test(obj.className)) {
//将内容替换为空串
obj.className = obj.className.replace(reg, "");
}
}
/
用来切换元素的class的方法
如果元素中含有该class，则删除
如果元素中没有该class，则添加
/
function toggleClass(obj, ) {
//检查obj中是否含有
if(hasClass(obj, )) {
//有该class，则删除
removeClass(obj, );
} else {
//没有该class，则添加
addClass(obj, );
}
}
注图片自己找
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程