JS 无缝轮播
JS 脚本
function moveAnimate2(ele, target) {
// 清除定时器
clearInterval(ele.interId);
ele.interId = setInterval(function() {
if (ele.offsetLeft == target) {
clearInterval(ele.interId);
// 向右走
} else {
// offsetLeft 是一个整数，表示向左偏移的像素值。
var smallstep = (target - ele.offsetLeft) / 10;
// 向右走(最后一步为1)和向左走(最后一步为-1)
smallstep = smallstep > 0 ? Math.ceil(smallstep) : Math.floor(smallstep);
ele.style.left = ele.offsetLeft + smallstep + 'px';
}
}, 20);
}
HTML代码
<!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;
}
ul {
list-style-type: none;
}
/* 最大的盒子-来确定轮播图的位置 */
.carousel {
/* 定位 */
position: relative;
width: 750px;
height: 360px;
border: 1px solid orange;
margin: 50px auto;
}
/* 图片放置内容的盒子 */
.cal-list {
width: 750px;
height: 360px;
/* 图片的盒子要给定位****** */
position: relative;
/* overflow: hidden; */
}
.cal-list .viewpage {
position: absolute;
width: 600%;
left: 0;
top: 0;
}
.cal-list .viewpage li {
float: left;
}
/* 小圆点大盒子 */
.circle-list {
width: 100px;
position: absolute;
left: 50%;
background-color: rgba(0, 0, 0, 0.5);
bottom: 30px;
margin-left: -50px;
padding: 5px;
border-radius: 15px;
}
.circle {
float: left;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
margin-left: 7px;
}
.active {
background-color: red;
}
.prev,
.next {
width: 30px;
height: 60px;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
font-size: 30px;
position: absolute;
top: 40%;
line-height: 60px;
border-radius: 0px 25px 25px 0;
text-align: center;
display: none;
}
.next {
right: 0;
border-radius: 25px 0px 0px 25px;
}
</style>
</head>
<body>
<!-- 轮播图最大的盒子 -->
<div class="carousel">
<!-- 放置图片的内容 -->
<div class="cal-list">
<ul class="viewpage">
<li><img src="images/pic1.jpg" alt=""></li>
<li><img src="images/pic2.jpg" alt=""></li>
<li><img src="images/pic3.jpg" alt=""></li>
<li><img src="images/pic4.jpg" alt=""></li>
<li><img src="images/pic5.jpg" alt=""></li>
<li><img src="images/pic1.jpg" alt=""></li>
</ul>
<!-- 左右按钮 -->
<div class="prev"><</div>
<div class="next">></div>
</div>
<!-- 小圆点 -->
<div class="circle-list">
<span class="circle active"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</div>
<script src="js/animateUntil.js"></script>
<script>
// 获取元素
var viewpage = document.getElementsByClassName('viewpage')[0];
var circles = document.getElementsByClassName('circle');
var calList = document.getElementsByClassName('cal-list')[0];
// 左边按钮
var prev = document.getElementsByClassName('prev')[0];
// 右边按钮
var next = document.getElementsByClassName('next')[0];
// 1.鼠标放在图片区域时,显示左右按钮,自动轮播停止
// 2.鼠标离开图片区域时,左右按钮消失,自动轮播开始
// 3.给右边按钮绑定事件,小圆点跟随图片变化而变化
// 4.给左边按钮绑定事件,小圆点跟随图片变化而变化
// 5.自动轮播调用右边按钮事件即可
// 6.焦点轮播
// 开始代码
// 排他的函数封装
function backColor(ele) {
// 排他使所有小圆点先变成白色
for (var j = 0; j < ele.length; j++) {
ele[j].className = 'circle';
};
};
// 1.鼠标放在图片区域时,显示左右按钮,自动轮播停止
calList.onmouseover = function() {
// 左右按钮显示
prev.style.display = "block";
next.style.display = "block";
// 轮播停止-----------
clearInterval(viewpage.autoId);
};
// 2.鼠标离开图片区域时,左右按钮消失,自动轮播开始
calList.onmouseout = function() {
// 左右按钮显示
prev.style.display = "none";
next.style.display = "none";
// 轮播开始-----------
autoplay();
};
// 3.给右边按钮绑定事件,小圆点跟随图片变化而变化
// 由于图片和小圆点的个数不相同-所以需要2个计数器来表示各自的当前active状态
// 小圆点计数器
var flag = 0;
// 图片当前走的target的位置的计数
var count = 0;
next.onclick = function() {
flag++;
count++;
// 设置小圆点的颜色
// 判定flag的值,是否需要回归初始
if (flag == circles.length) {
flag = 0;
};
// 判定count的值何时回归初始
if (count == viewpage.children.length) {
// 拉回到left为0
viewpage.style.left = 0;
// 走到第二张
count = 1;
};
// 先排他,再设置颜色
backColor(circles);
circles[flag].className = "circle active";
// 2.移动到当前位置的图片--使ul往左移动
var target = count * (-750);
moveAnimate2(viewpage, target);
};
// 4.给左边按钮绑定事件,小圆点跟随图片变化而变化
prev.onclick = function() {
// 判定是否是第一张图片
if (count == 0) {
count = viewpage.children.length - 1;
viewpage.style.left = count * (-750) + 'px';
}
flag--;
count--;
// 是否是第一个小圆点
if (flag < 0) {
flag = circles.length - 1;
};
// 先排他,再设置颜色
backColor(circles);
circles[flag].className = "circle active";
// 2.移动到当前位置的图片--使ul往左移动
var target = count * (-750);
moveAnimate2(viewpage, target);
};
// 5.自动轮播调用右边按钮事件即可
function autoplay() {
viewpage.autoId = setInterval(function() {
// 调用一下右边按钮绑定的事件
next.onclick();
}, 3000);
};
autoplay();
// 6.焦点轮播
for (var i = 0; i < circles.length; i++) {
// 保存i值
circles[i].index = i;
// 绑定事件
circles[i].onmouseover = function() {
// 设置同步器
flag = this.index;
count = this.index;
// 排他使所有小圆点先变成白色
// 先排他,再设置颜色
backColor(circles);
// 1.使小圆点变色
this.className = 'circle active';
// 2.移动到当前位置的图片--使ul往左移动
var target = this.index * (-750);
//调用JS脚本文件
moveAnimate2(viewpage, target);
}
}
</script>
</body>
</html>
版权声明：本文为weixin_44809440原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。