<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#container{width: 590px;height: 470px;margin:100px auto;overflow: hidden;position: relative;cursor: pointer;}
#box{width: 2360px;height: 470px;position: absolute;left: 0;transition: .2s;}
#box img{float: left;}
#direction{position: absolute;bottom:15px;top: 50%;width: 100%;height: 36px;transform: translateY(-50%);}
#direction .lf{float: left;}
#direction .rt{float: right;}
ul{list-style-type:none;position: absolute;bottom:15px;left: 50%;transform: translateX(-50%); }
ul li{width: 10px;height: 10px;border:1px solid #fff;border-radius: 50%;float: left;margin-right: 5px;}
ul li.visit{background: #fff;}
</style>
</head>
<body>
<div id="container">
<div id="box">
<img src="images/l1.jpg" alt="">
<img src="images/l2.jpg" alt="">
<img src="images/l3.jpg" alt="">
<img src="images/l4.jpg" alt="">
</div>
<div id="direction">
<img src="images/arrow-left.png" alt="" class="arrow lf">
<img src="images/arrow-right.png" alt="" class="arrow rt">
</div>
<ul id="col">
<li class="visit"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
//查找元素
var os=document.getElementById('container');
var o=document.getElementById('box');
var dc=document.getElementById('direction').getElementsByTagName('img');
var lis=document.getElementById('col').getElementsByTagName('li');
var timer;//计时器
var index=0;//指示器索引默认为0
autoPlay();
//自动轮播
function autoPlay() {
clearInterval(timer);
timer=setInterval(moveLeft,3000);
}
//指示器
for (var i = 0; i < lis.length; i++) {
lis[i].abc=i;//增加新属性并赋值
lis[i].onclick=function () {
var l=o.offsetLeft;
lis[index].className='';//当前修改为不显示
this.className='visit';//下一个显示
o.style.left=-(this.abc)*590+'px';
index=this.abc;
}
}
//鼠标移到图片时停止播放
os.onmouseenter=function () {
clearInterval(timer);
}
//离开继续轮播
os.onmouseleave=function () {
timer=setInterval(moveLeft,3000);
}
//下一张图片
dc[1].onclick=function () {
moveLeft();
}
//上一张图片
dc[0].onclick=function () {
moveRight();
}
//切换下一张图片
function moveLeft() {
var l=o.offsetLeft;//当前左边距
lis[index].className='';//指示器
index++;
if (l<=-1770) {
l=590;
}
if (index==lis.length) {
index=0;
}
lis[index].className='visit';
o.style.left=l-590+'px';
}
//切换上一张图片
function moveRight() {
var l=o.offsetLeft;//当前左边距
lis[index].className='';
index--;
if (index=-1) {
index=lis.length-1;
}
if (l==0) {
l=-2360;
}
lis[index].className='visit';
o.style.left=l+590+'px';
}
</script>
</body>
</html>
JS-通过位移实现轮播
最新推荐文章于 2022-11-28 10:58:32 发布
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
