实现思路:
设置一个外层div,用来显示轮播图,隐藏溢出部分 设置相对定位;
设置一个banner容器,并排放置img图片,使图片向左浮动 设置绝对定位;
利用banner容器的left,加上定时器,实现轮播。
定时器定时将banner容器的left减小,实现banner容器向左移,从而图片向左移。
移到一定程度停止,然后继续移,移到最后一张就重置所有参数,重新开始移。。。
第一张图片跟最后一张banner图必须一致,最后一张banner图用来过渡到第一张banner图。
同样的思路,用css3过渡实现可以使轮播过程更平滑,没有卡顿感:
在banner容器上设置css:
transition: all 0.5s linear;
再用定时使banner容器的left减少。
没错的话,这种方法轮播到最后一个图片的时候,应该是在0.5s内,所有的图片从左到右,很快地移回第一张。。。
感觉有点不爽,,所以还是选择了第一种方法。。。没有反方向移动,一直向左移。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js轮播</title>
<script type="text/javascript" src="play.js"></script>
<style type="text/css">
.mainImg {
width: 100%;
height: 599px;
overflow: hidden;
position: relative;
}
.mainImgWrapper {
width: 100%;
height: 100%;
position: absolute;
}
.mainImgWrapper img {
float: left;
}
.circle {
width: 100%;
position: absolute;
bottom: 40px;
text-align: center;
}
.circle span {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin: 0 10px;
border: solid 1px gainsboro;
}
.circle span:hover {
background: white !important;
}
</style>
<script type="text/javascript">
window.onload = function() {
// 获取轮播图大小
var clientWidth = document.getElementById("mainImg").offsetWidth;
// 动态设置主图片容器的大小(可动态增减图片)
var mainImgWrapper = document.getElementById("mainImgWrapper");
// 获取图片数量
var imgNum = mainImgWrapper.children.length;
mainImgWrapper.style.width = imgNum * clientWidth + "px";
for(var i = 0; i < imgNum; i++) {
mainImgWrapper.children[i].style.width = clientWidth + 'px'
// mainImgWrapper.children[i].style.height = clientWidth + 'px'
}
// 获取轮播图下小圆点的父元素
var circle = document.getElementById("circle");
// 最后一张图片不生成小圆点
// 根据图片数量动态添加对应的小圆点 设置图片大小
for(var i = 0; i < imgNum - 1; i++) {
circle.appendChild(document.createElement("span"));
}
// 设置其宽度,实现居中
//circle.style.width = ( 16 * circle.children.length)/100 + "rem";
// 动态设置主图片的大小
var mimgs = document.getElementsByClassName("mimg");
for(var i = 0; i < mimgs.length; i++) {
mimgs[i].style.width = clientWidth + "px";
}
// 开始轮播定时器
var timerStart;
// 延时轮播定时器
var delayTimer;
// 点击图片定时器
var circleBtn;
// 偏移量计数器
var counter = 0;
// 静止次数计数器
var timer = 1;
function start() {
// 轮播 主图片定时向左偏移
timerStart = setInterval(function() {
counter += 10;
mainImgWrapper.style.left = -counter + "px";
// 偏移量达到一定程度,停止偏移,并矫正图片位置。
if(counter >= clientWidth * timer) {
clearInterval(timerStart);
mainImgWrapper.style.left = -(clientWidth) * timer + "px";
setRollNavigation();
// 静止次数加一
timer += 1;
// 如果轮播过了所有图片,则重新设置偏移量
if(timer == mainImgWrapper.children.length) {
mainImgWrapper.style.left = 0 + "px";
counter = 10;
timer = 0;
}
// 停止一秒再开始
delayTimer = setTimeout(function() {
start();
}, 1000);
}
}, 10);
}
// 设置轮播图下小圆点的功能
function setRollNavigation() {
for(var i = 0; i < circle.children.length; i++) {
// 其他颜色统一
circle.children[i].style.background = "#4A7087";
};
// 设置当前小圆点颜色
if(timer < circle.children.length) {
circle.children[timer].style.background = "#C69255";
} else {
//如果超出数组索引界限,说明图片播到最后一张,直接把第一张图对应的小圆点 点亮
circle.children[0].style.background = "#C69255";
};
// 初始化小圆点样式
if(counter == 0) {
circle.children[0].style.background = "#C69255";
circle.children[1].style.background = "#4A7087";
}
};
function circleBtn() {
// 设置按钮点击事件
for(var i = 0; i < circle.children.length; i++) {
circle.children[i].index = i;
circle.children[i].onclick = function() {
// 先停止定时器
clearInterval(timerStart);
clearInterval(delayTimer);
clearInterval(circleBtn);
// 更新索引
timer = this.index;
// 导航按钮跟随点亮
setRollNavigation();
// 更新偏移量
counter = clientWidth * timer;
mainImgWrapper.style.left = -counter + "px";
// 点击按钮将静止两秒后开启轮播
circleBtn = setTimeout(function() {
start();
}, 2000);
};
};
};
setRollNavigation();
// 先静止一段时间才开始轮播
setTimeout(function() {
circleBtn();
start();
}, 2000);
}
</script>
</head>
<body>
<!--设置一个外层div,用来显示轮播图,隐藏溢出部分positin: relative;-->
<div class="mainImg" id="mainImg">
<!--设置一个banner容器,并排放置img图片,使图片向左浮动positin:absolute;-->
<div class="mainImgWrapper" id="mainImgWrapper">
<img src="http://www.ykqkdg.com/img/qingke1.jpg" alt="mainImg.jpg" />
<img src="http://www.ykqkdg.com/img/qingke2.jpg" alt="mainImg.jpg" />
<img src="http://www.ykqkdg.com/img/qingke1.jpg" alt="mainImg.jpg" />
</div>
<!--绝对定位的小圆点,分别代表每一个图片-->
<div class="circle" id="circle">
</div>
</div>
</body>
</html>