<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
.container{width: 590px;height: 470px;margin: 50px auto;/*border: 1px solid gray;*/overflow: hidden;
position: relative;}
.wrap{width: 2360px;height: 470px;position:absolute;left: 0;transition: 1s;}
.wrap img{float: left;}
</style>
</head>
<body>
<div class="container">
<!-- 轮播图 -->
<div class="wrap">
<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>
<!-- 指示器 -->
<ol class="cus">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- 箭头 -->
<div id="box-arrow">
<img class="arrow al" src="images/arrow-left.png" alt="">
<img class="arrow ar" src="images/arrow-right.png" alt="">
</div>
</div>
<script type="text/javascript">
var os=document.getElementsByClassName('wrap')[0];//轮播图区域
autoPlay();
//自动轮播
function autoPlay(){
setInterval(moveNext,3000);
}
//下一张
function moveNext(){
var l=os.offsetLeft;//当前left值
if(l==-1770){
l=590;//最左边
}
//显示下一张
os.style.left=l-590+'px';
}
</script>
</body>
</html>JS的另一种轮播图
猜你喜欢
转载自blog.csdn.net/weixin_44606660/article/details/87796799
今日推荐
周排行