<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 520px;
height: 280px;
margin: 40px auto;
position: relative;
}
.inner {
width: 100%;
height: 100%;
overflow: hidden;
/* overflow: scroll; */
}
.content {
width: 2600px;
height: 280px;
}
.content>img {
float: left;
}
.list {
list-style: none;
position: absolute;
bottom: 20px;
}
.list>li {
width: 35px;
height: 8px;
background-color: rgb(61, 60, 60);
float: left;
margin-left: 60px;
}
.list>.active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<div class="content">
<img src="./img/0.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
</div>
<ul class="list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
<script>
//获取页面元素
var inner_ = document.getElementsByClassName('inner')[0];
var imgs_ = document.getElementsByTagName('img');
var li = document.getElementsByTagName('li');
//定时器 切换图片的下标
var timer = null;
//定时器 规定每一张图片 每一步如何走
var timer2 = null;
// 设置图片的下标 默认为0
var index = 0;
function autoPlay() {
timer = setInterval(function () {
//调整图片的下标
index++;
if (index >= imgs_.length) {
index = 0;
}
//根据图片的下标, 判断当前inner要移动的位置
//图片动起来
var step = 0; //开始的步数 从零开始
var maxStep = 20; //一张图片多少次走完
var start = inner_.scrollLeft;//图片最开始的位置
var end = imgs_[0].offsetWidth * index;//图片结束的位置
var everyStep = (end - start) / maxStep;//每一步走多少
//设置每一张图片如何动
timer2 = setInterval(function () {
step++;
if (step >= maxStep) {
step = 0;
clearInterval(timer2);
}
start += everyStep;
inner_.scrollLeft = start;
}, 50);
//改变 li 的样式 利用排他法
for (var i in li) {
li[i].className = '';
//单击小圆点 停止轮播图播放
li[i].onclick = function () {
clearInterval(timer);
}
//双击小圆点 开始播放
li[i].ondblclick = function () {
autoPlay();
}
}
li[index].className = 'active';
for (var j in imgs_) {
imgs_[j].onclick = function () {
clearInterval(timer);
}
imgs_[j].ondblclick = function () {
autoPlay();
}
}
}, 2000);
}
autoPlay();
</script>
原生轮播图
最新推荐文章于 2024-07-25 11:26:35 发布