<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
}
li {
list-style: none;
}
.box {
position: relative;
width: 1000px;
height: 460px;
border: 1px solid pink;
}
.ul1 {
width: 100%;
height: 100%;
}
.ul1>li {
position: absolute;
top: 0;
left: 0;
}
.ul1>li:first-child {
z-index: 100;
}
.indexs {
z-index: 1000;
}
.left-button,
.right-button {
position: absolute;
top: 50%;
margin-top: -35px;
width: 35px;
height: 70px;
background: rgba(0, 0, 0, .3);
color: #ccc;
border-radius: 0 5px 5px 0;
text-align: center;
line-height: 70px;
font-size: 27px;
font-family: serif;
}
.right-button {
right: 0;
border-radius: 5px 0 0 5px;
}
.left-button:hover,
.right-button:hover {
background-color: #00000050;
color: #fff;
}
.ul2 {
position: absolute;
bottom: 20px;
right: 100px;
}
.ul2 li {
float: left;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 100%;
line-height: 20px;
text-align: center;
margin-right: 10px;
}
.ul2 li:hover {
background-color: red;
color: #fff;
}
.ul2 li:first-child {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<!-- 主体部分 -->
<ul class="ul1" id="ul1">
<li><img src="img/1.jpg" alt="" width="1000" height="460"></li>
<li><img src="img/2.jpg" alt="" width="1000" height="460"></li>
<li><img src="img/3.jpg" alt="" width="1000" height="460"></li>
<li><img src="img/5.jpg" alt="" width="1000" height="460"></li>
</ul>
<!-- 左按钮 -->
<div class="left-button indexs" id="left-button"><</div>
<!-- 右按钮 -->
<div class="right-button indexs" id="right-button">></div>
<!-- 下面的小圆圈 -->
<ul class="ul2 indexs" id="ul2">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
// 获取所有的li里面的图片
var imgs = document.getElementById('ul1').children;
// 获取左边的按钮
var leftbutton = document.getElementById('left-button');
// 获取右边的按钮
var rightbutton = document.getElementById('right-button');
// 获取下面的小圆圈
var button = document.getElementById('ul2').children;
// 设置索引号,方便查找li
var index = 0;
// 设置定时器
var dingshiqi;
// 刚开始先调用一次函数chong
chong();
function chong() {
// 定时器
dingshiqi = setInterval(function () {
// 索引号递增
index++;
// 如果当前索引号等于轮播图中图片的长度(就是到轮播图的最后一张图片时)
if (index == imgs.length) {
// 让索引号变成0,从第一张图片开始轮播
index = 0;
}
// 循环图片
for (var i = 0; i < imgs.length; i++) {
// 将所有图片的层级降低
imgs[i].style.cssText = 'z-index:0';
// 将所有小圆按钮清除样式
button[i].style.cssText = 'background-color:#fff;color:#000';
}
// 提高当前图片的索引号
imgs[index].style.cssText = 'z-index:100';
//给当前小圆按钮设置样式
button[index].style.cssText = 'background-color:red;color:#fff';
}, 2000);
}
// 点击左侧的按钮触发
leftbutton.onclick = function () {
// 清除定时器
clearInterval(dingshiqi);
// 让索引号递减
index--;
//如果当前索引号等于第一张图片的索引号时(就是到轮播图的第一张图片时)
if (index < 0) {
// 索引号变成最后一张图片的索引号
index = imgs.length - 1;
}
// 循环图片
for (var i = 0; i < imgs.length; i++) {
// 将所有图片的层级降低
imgs[i].style.cssText = 'z-index:0';
// 将所有小圆按钮清除样式
button[i].style.cssText = 'background-color:#fff;color:#000';
}
// 提高当前图片的索引号
imgs[index].style.cssText = 'z-index:100';
//给当前小圆按钮设置样式
button[index].style.cssText = 'background-color:red;color:#fff';
// 开启定时器
chong();
}
// 点击右侧的按钮触发
rightbutton.onclick = function () {
// 清除定时器
clearInterval(dingshiqi);
index++;
if (index > imgs.length - 1) {
index = 0;
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = 'z-index:0';
button[i].style.cssText = 'background-color:#fff;color:#000';
}
imgs[index].style.cssText = 'z-index:100';
button[index].style.cssText = 'background-color:red;color:#fff';
chong();
}
// 当点击第一个小圆点时触发
button[0].onclick = function () {
// 清除定时器
clearInterval(dingshiqi);
// 设置当前索引号为0
index = 0;
// 循环图片
for (var i = 0; i < imgs.length; i++) {
// 将所有图片的层级降低
imgs[i].style.cssText = 'z-index:0';
// 将所有小圆按钮清除样式
button[i].style.cssText = 'background-color:#fff;color:#000';
}
// 提高当前图片的索引号
imgs[index].style.cssText = 'z-index:100';
//给当前小圆按钮设置样式
button[0].style.cssText = 'background-color:red;color:#fff';
// 开启定时器
chong();
}
button[1].onclick = function () {
clearInterval(dingshiqi);
index = 1;
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = 'z-index:0';
button[i].style.cssText = 'background-color:#fff;color:#000';
}
imgs[index].style.cssText = 'z-index:100';
button[1].style.cssText = 'background-color:red;color:#fff';
chong();
}
button[2].onclick = function () {
clearInterval(dingshiqi);
index = 2;
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = 'z-index:0';
button[i].style.cssText = 'background-color:#fff;color:#000';
}
imgs[index].style.cssText = 'z-index:100';
button[2].style.cssText = 'background-color:red;color:#fff';
chong();
}
button[3].onclick = function () {
clearInterval(dingshiqi);
index = 3;
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = 'z-index:0';
button[i].style.cssText = 'background-color:#fff;color:#000';
}
imgs[index].style.cssText = 'z-index:100';
button[3].style.cssText = 'background-color:red;color:#fff';
chong();
}
</script>
</body>
</html>
原生js实现小米中的轮播图
最新推荐文章于 2021-01-08 19:19:04 发布