轮播图技术实战
Posted tea_year
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图技术实战相关的知识，希望对你有一定的参考价值。
typora-root-url: assetis
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-coJ8qZrI-1641605498062)(.\\image-20210325233927344.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JqbXdWaV-1641605498064)(.\\image-20210326095219815.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.box
width: 520px;
height: 280px;
/* border: 4px solid rgba(186, 187, 194, 0.6); */
margin: 50px auto;
position: relative;
.inner
width: 520px;
/* overflow-x: scroll; */
overflow-x: hidden;
scroll-margin-left: 50px;
.con
width: 2600px;
height: 100%;
overflow: hidden;
.con>img
width: 520px;
height: 280px;
float: left;
/* 修改list的样式 */
.list
overflow: hidden;
list-style: none;
position: absolute;
bottom: 1px;
left: 68px;
.list>li
width: 30px;
height: 8px;
background-color: rgb(163,163,163);
float: left;
margin-left: 40px;
.list>li.active
background-color: white;
</style>
</head>
<body>
<div class="box">
<div class="inner">
<div class="con">
<img src="./image/0.jpg" alt="">
<img src="./image/1.jpg" alt="">
<img src="./image/2.jpg" alt="">
<img src="./image/3.jpg" alt="">
<img src="./image/4.jpg" alt="">
</div>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
<script>
//获取照片元素
var imgs_ = document.getElementsByTagName('img');
var inner_ = document.getElementsByClassName('inner')[0];
var lis =document.getElementsByTagName('li');
//自动执行的时间
var timer = null;
var timer2 = null;//执行每一步的间隔函数
var x = 0; //每张图片的下标
function autoMove()
timer = setInterval(function()
x++;
//图片下标不能大于图片的个数
if(x>=imgs_.length)
x = 0;
//动起来
var step = 0;//初始化步数
var maxStep = 20; //最大20步走完
var start = inner_.scrollLeft;//起始位置
var end = imgs_[0].offsetWidth * x; //结束位置
var everyStep = (end - start) / maxStep; //执行每一步的步长
timer2 = setInterval(function()
step++;
if(step>=maxStep)
step = 0;
clearInterval(timer2);
start += everyStep;
inner_.scrollLeft = start;
,15)
for(var i =0;i<lis.length;i++)
lis[i].className='';
lis[x].className = 'active';
lis[x].onclick = function()
clearInterval(timer);
imgs_[x].onclick =function()
clearInterval(timer);
imgs_[x].ondblclick = function()
autoMove();
,2000);
autoMove();
</script>
</html>
封装后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.box
width: 520px;
height: 280px;
/* border: 4px solid rgba(186, 187, 194, 0.6); */
margin: 50px auto;
position: relative;
.inner
width: 520px;
/* overflow-x: scroll; */
overflow-x: hidden;
scroll-margin-left: 50px;
.con
width: 2600px;
height: 100%;
overflow: hidden;
.con>img
width: 520px;
height: 280px;
float: left;
/* 修改list的样式 */
.list
overflow: hidden;
list-style: none;
position: absolute;
bottom: 1px;
left: 68px;
.list>li
width: 30px;
height: 8px;
background-color: rgb(163, 163, 163);
float: left;
margin-left: 40px;
.list>li.active
background-color: white;
</style>
</head>
<body>
<div class="box">
<div class="inner">
<div class="con">
<img src="./image/0.jpg" alt="">
<img src="./image/1.jpg" alt="">
<img src="./image/2.jpg" alt="">
<img src="./image/3.jpg" alt="">
<img src="./image/4.jpg" alt="">
</div>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
<script>
//获取照片元素
var imgs_ = document.getElementsByTagName('img');
var inner_ = document.getElementsByClassName('inner')[0];
var lis = document.getElementsByTagName('li');
//自动执行的时间
var timer = null;
var timer2 = null;//执行每一步的间隔函数
var x = 0; //每张图片的下标
function autoMove()
timer = setInterval(function ()
x++;
//图片下标不能大于图片的个数
if (x >= imgs_.length)
x = 0;
//动起来
gogo();
//改变list的状态
change_list();
, 2000);
function gogo()
var step = 0;//初始化步数
var maxStep = 20; //最大20步走完
var start = inner_.scrollLeft;//起始位置
var end = imgs_[0].offsetWidth * x; //结束位置
var everyStep = (end - start) / maxStep; //执行每一步的步长
timer2 = setInterval(function ()
step++;
if (step >= maxStep)
step = 0;
clearInterval(timer2);
start += everyStep;
inner_.scrollLeft = start;
, 15)
function change_list()
for (var i = 0; i < lis.length; i++)
lis[i].className = '';
lis[x].className = 'active';
lis[x].onclick = function ()
clearInterval(timer);
imgs_[x].onclick = function ()
clearInterval(timer);
imgs_[x].ondblclick = function ()
autoMove();
autoMove();
</script>
</html>
clearInterval(timer);
imgs_[x].onclick = function ()
clearInterval(timer);
imgs_[x].ondblclick = function ()
autoMove();
autoMove();
以上是关于轮播图技术实战的主要内容，如果未能解决你的问题，请参考以下文章