原生JavaScript轮播图实现方法
本文实例为大家分享了JavaScript轮播图的实现方法，供大家参考，具体内容如下
效果截图：
注：div容器大小和图片路径可以自行设置,添加img和a标签后浏览器可以自适应.
创建image文件夹存放图片
写入html文本
<body>
//图片路径可以自己更改
<div id="outer">
<ul id="imglist">
<li><img src="image/8.jpg" alt=""></li>
<li><img src="image/6.jpg" alt=""></li>
<li><img src="image/7.jpg" alt=""></li>
<li><img src="image/6.jpg" alt=""></li>
<li><img src="image/8.jpg" alt=""></li>
<li><img src="image/7.jpg" alt=""></li>
<li><img src="image/6.jpg" alt=""></li>
<li><img src="image/8.jpg" alt=""></li>
</ul>
<div id="nav">
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
</div>
</div>
</body>
加入Css样式
<style>
* {
margin: 0px;
padding: 0px;
}
/* 外框容器 */
#outer {
width: 1555px;
height: 600px;
background-color: #bfa;
margin: 100px auto;
position: relative;
/* 隐藏 */
overflow: hidden;
}
/* 图片列表 */
#imglist {
/* 弹性盒布局 */
display: flex;
list-style: none;
position: relative;
/* 布局方向 */
/* flex-direct5on: row; */
/*一张图片像素移动`1552px*/
/* right: 1552px; */
}
#imglist li {
margin: 10px 10px;
}
/* 导航点 */
#nav {
display: flex;
list-style: none;
position: absolute;
bottom: 50px;
/* 1555/2 - 6*(20+25)/2 */
/* left: 642px; */
}
#nav a {
width: 25px;
height: 25px;
margin: 0px 10px;
background-color: rgb(223, 129, 52);
border-radius: 5px;
}
/* 鼠标移动效果 */
#nav a:hover {
background-color: rgb(215, 107, 224);
}
</style>
用JavaScript实现功能
<script type="text/javascript">
window.onload = function () {
// 获取外框属性
var outer = document.getElementById("outer");
// 获取imglist属性
var imglist = document.getElementById("imglist");
// 获取img属性
var imgArr = document.getElementsByTagName("img");
// 获取a属性
var allA = document.getElementsByTagName('a');
//获取导航点
var nav = document.getElementById("nav");
//设置导航点居中位置
nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";
//默认显示索引
var index = 0;
allA[index].style.backgroundColor = "rgb(215, 107, 224)";
// 切换导航点定时器
var temer = setInterval(function () {
//循环显示
index = (++index) % allA.length;
//设置导航点背景颜色
allA[index].style.backgroundColor = "rgb(215, 107, 224)";
SetA();
//自动切换图片
//修改图片,一张图片像素移动左移动1552px
imglist.style.transition = "right 1.5s"
imglist.style.right = (index * 1552) + "px";
}, 1800);
//单击超链接显示图片
for (var i = 0; i < allA.length; i++) {
//为每个超链接添加索引
allA[i].index = i;
//为每个超链接绑定单击响应函数
allA[i].onclick = function () {
imgIndex = this.index;
//覆盖导航点当前的位置
index = imgIndex;
SetA();
//修改图片,一张图片像素移动左移动1552px
imglist.style.transition = "right .85s"
imglist.style.right = (imgIndex * 1552) + "px";
//修改选择的a标签
allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";
};
}
//清除a的样式
function SetA() {
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
//给当前导航设定
allA[index].style.backgroundColor = "rgb(215, 107, 224)";
}
};
</script>
完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
* {
margin: 0px;
padding: 0px;
}
/* 外框容器 */
#outer {
width: 1555px;
height: 600px;
background-color: #bfa;
margin: 100px auto;
position: relative;
/* 隐藏 */
overflow: hidden;
}
/* 图片列表 */
#imglist {
/* 弹性盒布局 */
display: flex;
list-style: none;
position: relative;
/* 布局方向 */
/* flex-direct5on: row; */
/*一张图片像素移动`1552px*/
/* right: 1552px; */
}
#imglist li {
margin: 10px 10px;
}
/* 导航点 */
#nav {
display: flex;
list-style: none;
position: absolute;
bottom: 50px;
/* 1555/2 - 6*(20+25)/2 */
/* left: 642px; */
}
#nav a {
width: 25px;
height: 25px;
margin: 0px 10px;
background-color: rgb(223, 129, 52);
border-radius: 5px;
}
/* 鼠标移动效果 */
#nav a:hover {
background-color: rgb(215, 107, 224);
}
</style>
<script type="text/javascript">
window.onload = function () {
// 获取外框属性
var outer = document.getElementById("outer");
// 获取imglist属性
var imglist = document.getElementById("imglist");
// 获取img属性
var imgArr = document.getElementsByTagName("img");
// 获取a属性
var allA = document.getElementsByTagName('a');
//获取导航点
var nav = document.getElementById("nav");
//设置导航点居中位置
nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";
//默认显示索引
var index = 0;
allA[index].style.backgroundColor = "rgb(215, 107, 224)";
// 切换导航点定时器
var temer = setInterval(function () {
index = (++index) % allA.length;
//设置导航点背景颜色
allA[index].style.backgroundColor = "rgb(215, 107, 224)";
SetA();
//自动切换图片
//修改图片,一张图片像素移动左移动1552px
imglist.style.transition = "right 1.5s"
imglist.style.right = (index * 1552) + "px";
//循环显示
}, 1800);
//单击超链接显示图片
for (var i = 0; i < allA.length; i++) {
//为每个超链接添加索引
allA[i].index = i;
//为每个超链接绑定单击响应函数
allA[i].onclick = function () {
imgIndex = this.index;
//覆盖导航点当前的位置
index = imgIndex;
SetA();
//修改图片,一张图片像素移动左移动1552px
imglist.style.transition = "right .85s"
imglist.style.right = (imgIndex * 1552) + "px";
//修改选择的a标签
allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";
};
}
//清除a的样式
function SetA() {
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "rgb(215, 107, 224)";
}
};
</script>
</head>
<body>
<div id="outer">
<ul id="imglist">
<li><img src="image/8.jpg" alt=""></li>
<li><img src="image/6.jpg" alt=""></li>
<li><img src="image/7.jpg" alt=""></li>
<li><img src="image/6.jpg" alt=""></li>
<li><img src="image/8.jpg" alt=""></li>
<li><img src="image/7.jpg" alt=""></li>
<li><img src="image/6.jpg" alt=""></li>
<li><img src="image/8.jpg" alt=""></li>
</ul>
<div id="nav">
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
【原URL http://www.yidunidc.com/mggfzq.html 请说明出处】 <a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
<a href="JavaScript:;"></a>
</div>
</div>
</body>
</html>
函数使用：
创建定时器:
setInterval(function () {},30)
设置圆角边框:
border-radius: 5px;
offsetWidth 水平方向 width + 左右padding + 左右border
offsetHeight 垂直方向 height + 上下padding + 上下borderclientWidth 水平方向 width + 左右padding
clientHeight 垂直方向 height + 上下padding
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持hwidc。