js实现banner轮播效果
黎奇略
js实现banner轮播效果
<body>
<!-- banner图循环 -->
<div class="banenr-center">
<ul class='center'>
<li style="background-color: blue;" id="one">1</li>
<li style="background-color: red;">2</li>
<li style="background-color:yellow;">3</li>
</ul>
<span class="but-left"></span>
<span class="but-right"></span>
<ul class="centers">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript" src="./js/animation.js"></script>
<script type="text/javascript" src="./js/carousel.js"></script>
css部分
.banenr-center {
width: 700px;
height: 300px;
/* border: 1px solid #000; */
margin: 0 auto;
overflow: hidden;
position: relative;
}
.center {
width: 2800px;
font-size: 50px;
text-align: center;
line-height: 300px;
position: absolute;
}
.center li {
list-style: none;
width: 700px;
height: 300px;
float: left;
}
.but-left {
position: absolute;
left: 0;
top: 140px;
width: 20px;
height: 35px;
display: none;
}
.but-right {
position: absolute;
right: 0;
top: 140px;
width: 20px;
height: 35px;
display: none;
}
div:hover span {
display: block;
}
.centers li {
list-style: none;
width: 8px;
height: 8px;
border: 1px solid #000;
border-radius: 50%;
float: left;
margin-left: 20px;
position: relative;
}
.centers {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.active {
background: #fff;
}
animation.js
// 封装一个JS文件， 这个文件就是动画文件
/*
element：要移动的元素
targetVal：要移动的距离
speed：一步要移动距离
*/
// 定义全局变量
var dsq;
function moveElement (element, targetVal, speed) {
// 一上来先清除上一个
window.clearInterval(dsq);
// 点击设置定时器
dsq = window.setInterval(function () {
// 每次点击都会启动定时器，当多次点击，多次启动，会有n个定时器提示控制元素移动 // 我们要想处理这个问题：保证页面只有一个定时器
// 每次点击要清除上一个定时器，再打开新的定时器
// 要想设置盒子移动，我们需要知道上一次盒子left的值，再加上10，最后赋值给盒子的left
// 获取盒子左距离
var leftVal = element.offsetLeft;
// 如果到达指定位置，我们要停止定时器继续运动
if (leftVal == targetVal) {
window.clearInterval(dsq);
return;
}
// 判断：如果不成倍数的移动，那么元素会左右晃动，原因是因为不够走，强制走就会大于，再小目标来回弹动
// 处理：如果不够继续移动一步，直接让元素到大目标既可
// 所以此时元素有两种，一种够移动一步，一种是不够走一步，不够走一步直接设置元素到达目标
if (Math.abs(targetVal - leftVal) < speed) { // 不够走一步
// 直接把元素设置到目标
element.style.left = targetVal + 'px';
} else {
// 够走一步
// 加10
if (targetVal > leftVal) { // 正方向
leftVal = leftVal + speed;
} else {
leftVal = leftVal - speed;
}
// 设置给盒子的left
element.style.left = leftVal + 'px';
}
},10);
}
carousel.js
var banenrCenter = document.querySelector('.banenr-center');
var butLeft = document.querySelector('.but-left');
var burRight = document.querySelector('.but-right');
var center = document.querySelector('.center');
var lis = document.querySelectorAll('.centers li');
var width = banenrCenter.offsetWidth;
console.log(width);
var one = document.getElementById('one');
var index = 0;
var clone = one.cloneNode(true);
center.appendChild(clone);
//右滚动
burRight.onclick = function () {
if(index==0){
center.style.left = 0 + 'px';
}
lis[index].className = '';
index++;
distance = - index * width
moveElement(center,distance,10)
if (index == 3) {
index = 0;
}
// center.style.left = - index * width + 'px';
lis[index].className = 'active';
};
//左滚动
butLeft.onclick = function () {
lis[index].className = '';
index--;
distance = - index * width
moveElement(center,distance,10)
if (index < 0) {
index = 2
center.style.left = -2100 + 'px';
};
// center.style.left = - index * width + 'px';
lis[index].className = 'active';
};
//小点跟随
for (var i = 0; i < lis.length; i++) {
lis[i].xiabiao = i;
lis[i].onclick = function () {
lis[index].className = '';
index = this['xiabiao'];
// center.style.left = -index * width + 'px';
distance = - index * width
moveElement(center,distance,10)
lis[index].className = 'active';
}
}
//自动轮播
var auto = window.setInterval(function(){
burRight.onclick();
},2000);
banenrCenter.onmouseover = function(){
window.clearInterval(auto);
};
banenrCenter.onmouseout = function(){
auto = window.setInterval(function(){
burRight.onclick();
},2000);
}
类似资料：