javascript基础知识之html5轮播图实例讲解（44）
发布时间 - 2026-01-10 23:06:32 点击率：次本文实例为大家分享了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);
}
}
注：图片自己找
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
# js
# html5
# 轮播图
# 使用html+js+css 实现页面轮播图效果(实例讲解)
# JavaScript+css+HTML实现移动端轮播图（含源码）
# Html+CSS+JS轮播图实现源码(手动轮播
# 自动轮播)
# 超链接
# 创建一个
# 切换到
# 第一个
# 回调
# 将其
# 第二个
# 设置为
# 第一张
# 为父
# 一个函数
# 遍历
# 中有
# 不受
# 正则表达式
# 火狐
# 会将
# 大家分享
# 时要
# 绑定
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】
怎样使用JSON进行数据交换_它有什么限制
php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】
Android使用GridView实现日历的简单功能
iOS正则表达式验证手机号、邮箱、身份证号等
Laravel如何构建RESTful API_Laravel标准化API接口开发指南
北京企业网站设计制作公司,北京铁路集团官方网站？
千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】
如何获取上海专业网站定制建站电话？
昵图网官网入口 昵图网素材平台官方入口
高防服务器租用如何选择配置与防御等级？
Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】
EditPlus 正则表达式 实战(3)
如何基于云服务器快速搭建个人网站？
如何用虚拟主机快速搭建网站？详细步骤解析
个人网站制作流程图片大全,个人网站如何注销？
Laravel如何创建自定义Facades？（详细步骤）
香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化
javascript中的try catch异常捕获机制用法分析
如何撰写建站申请书？关键要点有哪些？
Win11怎么开启自动HDR画质_Windows11显示设置HDR选项
Laravel如何创建自定义Artisan命令？（代码示例）
Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】
Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践
Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码？
Swift开发中switch语句值绑定模式
创业网站制作流程,创业网站可靠吗？
Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】
深入理解Android中的xmlns:tools属性
如何快速上传建站程序避免常见错误？
米侠浏览器网页图片不显示怎么办 米侠图片加载修复
百度浏览器如何管理插件 百度浏览器插件管理方法
高端建站三要素：定制模板、企业官网与响应式设计优化
Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】
Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询
HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】
Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程
千库网官网入口推荐 千库网设计创意平台入口
Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】
如何在VPS电脑上快速搭建网站？
lovemo网页版地址 lovemo官网手机登录
详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）
Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】
用v-html解决Vue.js渲染中html标签不被解析的问题
Laravel如何实现全文搜索功能？（Scout和Algolia示例）
如何快速配置高效服务器建站软件？
Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】
购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？
国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？
高防服务器如何保障网站安全无虞？
最新文章
Sublime怎么一键压缩JS代码 Su
sublime如何在搜索中使用正则表达式
Sublime如何设置透明窗口效果 Su
mysql如何设计商品表结构_mysql
css属性背景图不显示怎么办_通过检查路
如何使用Golang实现排序_Golan
农历闰月是怎么回事_为合回归年加一月调整
塑造《刺客信条》艾吉奥传奇的编剧离开育碧
1英里等于多少公里 1mile和km的换
css grid布局中行和列是如何定义的
PS批量旋转和翻转图片，快速校正图片方向
C# Swagger UI自定义方法 C
OPPO手机九宫格和全键盘怎么切换_OP
Go语言如何实现用户登录注册_Golan
1节飞行速度多少公里每小时 1节是多少公
纸嫁衣8千子树第五章庙门怎么开启 庙门
Laravel 多行数据编辑表单中实现逐
明日之后如何提升钓鱼等级 明日之后提升钓
支付宝怎样查年度账单_支付宝年度账单查看
C# 多线程UI更新Dispatcher