一、定时器完成动画效果
1.1 使用定时器完成动画效果案例
<!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>
</head>
<body>
<div style="width:100px;height:100px;background-color: red; display: inline-block;"></div>
<br/>
<button>变长</button><button>变宽</button><button>向下移动</button><button>向上移动</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
function move(obj,attr,target,speed,fn){
if(move.id){
clearInterval(move.id)
}
move.id=window.setInterval(function(){
var nowValue=parseInt($(obj).css(attr));
nowValue+=speed;
if(speed>0 && nowValue>=target || speed<0 && nowValue<=target){
nowValue=target;
window.clearInterval(move.id);
fn();
}
$(obj).css(attr,nowValue);
},20)
}
$("button").eq("0").click(function(){
move($('div'),'height',300,20,function(){
console.log('到达')
})
})
$("button").eq("1").click(function(){
move($('div'),'width',300,20,function(){
console.log('到达')
})
})
$("button").eq("2").click(function(){
move($('div'),'margin-top',300,20,function(){
console.log('到达')
})
})
$("button").eq("3").click(function(){
move($('div'),'margin-top',0,-20,function(){
console.log('到达')
})
})
</script>
</html>
1.2 注意事项
1)定时器的任务是在主函数代码执行完毕后,才执行。
2)在定时器中关闭定时器,当前开启的任务会执行完毕后,不在执行
3)定时器关闭后,定时器ID实质上依旧存在
二、定时器使用案例 – 轮播图
2.1 实现功能
实现功能:
1、点击左右图标平滑翻页
2、无线循环切换
3、鼠标移出自动翻页,鼠标移入停止翻页
4、点击圆点切换到对应的图片上
2.2 代码实现
>>>>>> 代码实现
<!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:0px;
padding:0px;
}
.wrapper{
width:700px;
height:400px;
margin:20px auto;
position: relative;
overflow: hidden;
}
.imags{
width:4900px;
height:400px;
padding:0px;
position: relative;
left:-700px;
}
.imags img{
width:700px;
height:100%;
margin:0px;
float:left;
}
ul{
position: absolute;
z-index:999;
list-style: none;
bottom:15px;
left:0;
right:0;
margin:0 auto;
width:150px;
display: flex;
justify-content: space-around;
}
.wrapper .dot{
width:13px;
height:13px;
background-color: rgba(0,0,0,0.5);
border:1px solid white;
border-radius: 50%;
}
.wrapper .dot:hover{
background-color:red;
}
.wrapper .arrow:first-of-type{
position: absolute;
display: inline-block;
border:20px solid transparent;
z-index: 999;
top:200px;
left:20px;
}
.wrapper .arrow:last-of-type{
position: absolute;
display: inline-block;
border:20px solid transparent;
z-index: 999;
top:200px;
right:20px;
}
.wrapper:hover .arrow:first-of-type{
border-right-color:pink;
}
.wrapper:hover .arrow:last-of-type{
border-left-color:pink;
}
.wrapper:hover li{
background-color: white;
}
.wrapper li.fo{
background-color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="imags">
<img src="img/5.jpg" >
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
<img src="img/5.jpg">
<img src="img/1.jpg" >
</div>
<ul>
<li class="dot fo"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
<span class="arrow next" ></span>
<span class="arrow prev"></span>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
function resetPoint(targetImgIndex){
var arr=[0,4,3,2,1]
if(targetImgIndex>=6){
targetImgIndex=1;
}else if(targetImgIndex==0){
targetImgIndex=5;
}
$(".dot").removeClass('fo').eq(arr[(targetImgIndex-1)]+"").addClass('fo');
}
function nextPage(flag,tp){
if(nextPage.timer){
return;
}
nextPage.imgIndex=parseInt($('.imags').position().left/-700);
console.log('当前图片',nextPage.imgIndex)
var nowPosition=parseInt($('.imags').position().left)
var targetPosition=tp?tp:parseInt(flag?nowPosition-700:nowPosition+700);
var targetImgIndex=parseInt(targetPosition/-700);
var item_offset=flag?-20:20;
var item_offtime=10;
nextPage.timer = window.setInterval(function(){
var curPosition=parseInt($('.imags').position().left)
curPosition+=item_offset;
if((item_offset>0 && curPosition>=targetPosition)||(item_offset<0 && curPosition<=targetPosition)){
clearInterval(nextPage.timer);
nextPage.timer = undefined;
curPosition=targetPosition;
if(targetImgIndex===6){
curPosition=-700;
}else if(targetImgIndex==0){
curPosition=-700*5;
}
resetPoint(targetImgIndex);
}
$('.imags').css('left',curPosition);
},item_offtime)
}
var timer=window.setInterval(function(){
nextPage(true);
},2000);
$(".wrapper").hover(function(){
window.clearInterval(timer)
},function(){
timer=window.setInterval(function(){
if(timer){
window.clearInterval(timer)
}
nextPage(true);
},2000);
})
$(".next").click(function(){
nextPage(true);
})
$(".prev").click(function(){
nextPage(false);
})
$(".dot").click(function(){
window.clearInterval(timer)
var arr=[1,5,4,3,2]
var nowImageIndex=parseInt($('.imags').position().left/-700);
var targetImageIndex= arr[$(this).index()];
console.log('当前图片索引值:',nowImageIndex,'目标索引值',targetImageIndex)
if(nowImageIndex<=targetImageIndex){
nextPage(true,targetImageIndex*(-700));
}else{
nextPage(true,targetImageIndex*(-700));
}
})
</script>
</html>
>>>>>> 效果图
2.3 核心技术解析
1)轮播图原理
1、在一个宽度为2500px的div的平行排列5张宽度为500px的图片。
2、然后再外面套上一个500px的div,并设置overflow:hidden。
此时内部溢出的图片就会被隐藏。只显示一张图片。
3、然后通过移动大div的左右位置,来调节图片的位置。
【类似于相框和相片,相片很长,但是也只显示一部分】
>>>>>> 轮播图原理案例
<!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:0px;
padding:0px;
}
.wrapper{
width:700px;
height:400px;
margin:20px auto;
position: relative;
overflow: hidden;
}
.imags{
width:4900px;
height:400px;
padding:0px;
position: relative;
}
.imags img{
width:700px;
height:100%;
margin:0px;
float:left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="imags">
<img src="img/5.jpg" alt="1">
<img src="img/1.jpg" alt="1">
<img src="img/2.jpg" alt="2">
<img src="img/3.jpg" alt="3">
<img src="img/4.jpg" alt="4">
<img src="img/5.jpg" alt="5">
<img src="img/1.jpg" alt="5">
</div>
</div>
</body>
</html>
2)轮播图实现平滑翻页、无限循环效果的原理
实现平滑翻页、无限循环的方式:
1) 在第一张图片的前面另外加上最后一张图片。
在最后一张图片的后面另外加上第一张图片。
2) 当即将到达最右边的图片时,就直接跳转到第一张图片。
当即将到达最左边的图片时,就直接跳转到最后一张图片。
<div class="imags">
<img src="img/5.jpg" > <!-- 临界图片 -->
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
<img src="img/5.jpg">
<img src="img/1.jpg" > <!-- 临界图片 -->
</div>
3)相关API详解
$('.imags').css('left','90');
$('.imags').css('left','90px');
设置css样式时,可以加上单位也可以不加。
但是获取css样式时,会有单位。
$('.imags').position().left
获取定位元素的左右设置的值。