1、封装一个简单的动画函数
function animate(obj,target,callback){
clearInterval(obj.timer);//清除定时器防止定时器重复添加
obj.timer=setInterval(function(){
var step=(target-obj.offsetLeft)/10; //定义一个步长，实现速度变化
step=step>0 ? Math.ceil(step) : Math.floor(step); //解决取整问题的bug
if(obj.offsetLeft==target){//判断运动距离与目标距离相等，停止运动
clearInterval(obj.timer);
if(callback){
callback();//如果有回调函数，执行回调函数
}
}
obj.style.left=obj.offsetLeft+step+'px'; //实现运动
},15);
}
2、页面结构
<div class="focus">
<ul class="image">
<li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner4.jpg" alt=""></a></li>
</ul>
<ul class="round"></ul>
<div class="button">
<a href="javascript:;" class="prev">上一页</a>
<a href="javascript:;" class="next">下一页</a>
</div>
</div>
3、css样式
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: white;
}
img{
display: block;
}
.focus{
width: 730px;
margin: 50px auto;
/* border: 1px solid gray; */
position: relative;
overflow: hidden;
}
.image{
width: 2920px;
height: 454px;
position: relative;
}
.image li{
float: left;
}
.button{
position: absolute;
display: none;
top: 50%;
margin-top: -20px;
}
.button a{
display: inline-block;
line-height: 40px;
width: 30px;
height: 40px;
text-align: center;
background: black;
opacity: .4;
}
.button a:hover{
color: red;
}
.next{
position: absolute;
left: 700px;
top: 50%;
margin-top: -20px;
}
.round{
position: absolute;
top: 430px;
margin-left: 321px;
}
.round li{
width: 10px;
height: 10px;
border: 1px solid gray;
border-radius: 50%;
float: left;
margin-left: 10px;
}
.clear{
clear: both;
}
.current{
background: black;
}
4、js实现轮播功能
window.addEventListener('load',function(){
var focus=document.querySelector('.focus');
var button=document.querySelector('.button');
var prev=document.querySelector('.prev');
var next=document.querySelector('.next');
var focusWidth=focus.offsetWidth;//获取轮播区域的宽度
focus.addEventListener('mouseover',function(){
button.style.display='block';
clearInterval(timer);
timer=null;
})//设置鼠标进入，显示前进后退按钮，且关闭定时器，停止滚动
focus.addEventListener('mouseout',function(){
button.style.display='none';
timer=setInterval(function(){
next.click();
},2000)
})//设置鼠标离开，隐藏前进后退按钮，且开启定时器，开始滚动
var image=document.querySelector('.image');
var round=document.querySelector('.round');
var length=image.children.length;
for(var i=0;i<length;i++){
var li=document.createElement('li');
round.appendChild(li);//动态添加小圆圈，小圆圈个数跟随图片个数变化
li.setAttribute('index',i);//设置自定义属性index
}
round.children[0].className='current';//添加第一个小圆圈默认样式
var roundLi=round.children;
for(var i=0;i<roundLi.length;i++){
roundLi[i].addEventListener('click',function(){
for(var i=0;i<roundLi.length;i++){////小圆圈点击事件，改变颜色和图片位置
roundLi[i].className='';
}//排他思想
this.className='current';
var index=this.getAttribute('index');
num=index;
circle=index;
var focusWidth=focus.offsetWidth;
animate(image,-index*focusWidth);//利用index计算图片运动的距离，实现点击小圆圈的效果
})
}
//使用克隆增加一个li放在ul的最后面，实现无缝滚动的视觉效果
var first=image.children[0].cloneNode(true);//深克隆
image.appendChild(first);
var lengths=image.children.length;
image.style.width=lengths*focusWidth+'px';
//鼠标点击前进按钮的点击事件
var num=0;
var circle=0;//控制小圆圈的变化
var flag=true;
next.addEventListener('click',function(){
if(flag){ //flag节流阀防止动画运行过快
flag=false;
if(num==lengths-1){
image.style.left=0;
num=0;//点击切换到最后一张的时候，位置拉回原始位置，重新赋值num
}
num++;
animate(image,-focusWidth*num,function(){
flag=true;
});
circle++;
if(circle==length){
circle=0;
}
circleChange();
}
})
//鼠标点击后退按钮的点击事件
prev.addEventListener('click',function(){
if(flag){
flag=false;
if(num==0){
num=lengths-1;
image.style.left=-num * focusWidth +'px';
}
num--;
animate(image,-focusWidth*num,function(){
flag=true;
});
circle--;
if(circle<0){
circle=roundLi.length-1;
}
circleChange();
}
})
//把公共部分小圆圈变化封装成函数
function circleChange(){
for(var i=0;i<roundLi.length;i++){
roundLi[i].className='';
};
roundLi[circle].className='current';
}
//设置一个定时器
var timer=setInterval(function(){
next.click();//每两秒执行一次next的点击函数，实现定时轮播切换
},2000)
})
