1.之前的学习封装的是一个匀速的运动函数，是这个样子的
/*
* 运动函数
* @param {object}:elem 标签
* @param {string}:attr 属性名
* @param {number}:step 步长（每次的运动距离）
* @param {number}:target 目标值
*/
function move(elem,attr,step,target){
step = parseInt(getStyle(elem,attr))< target ? step :-step;
clearInterval(elem.timer);//自定义属性
elem.timer = setInterval(function(){
//获取当前值 + 10
var cur = parseInt(getStyle(elem,attr)) + step;
if(cur >= target && step > 0 || cur <= target && step < 0){ //下
cur = target;
//停止定时器
clearInterval(elem.timer);
}
elem.style[attr] = cur + "px";
},30);
}
这个函数是用来解决轮播图的问题，使图片能够自动的无限循环，速度是匀速的，无论是从第一张到第二张，还是第一张到最后一张，切换的速度都是一样的，这与我们实际看到淘宝等网页的轮播图是不一样的，他们是远快近慢，所以相对来说，把匀速的运动函数运用到轮播图上还是有点小瑕疵，因此今天我学习了封装带有缓冲的运动函数。
/*
* 有缓冲的运动
* @param {object}:elem 标签
* @param {object}:attrs 运动参数
* @param {function}:fun 回调函数
*/
function bufferMove(elem,attrs,fun){//运动元素elem，属性attr，目标值target
//开启定时器之前，先清除掉之前的，保证运动方向
clearInterval(elem.timer);//width
elem.timer = setInterval(function(){
var flag = true; //假设全部到达目标点
for(var attr in attrs){
//1.获取当前值
if(attr == "opacity"){
var cur = parseInt(getStyle(elem,attr)*100); //放大了100倍
}else{
var cur = parseInt(getStyle(elem,attr)); //放大了100倍
}
//2.计算速度
var speed = (attrs[attr]-cur)/10;
//3.处理小数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//4.停止定时器
if(cur != attrs[attr]){ //只要有一个属性没到目标点，说明假设不成立，flag=false
flag = false;
}
//在当前值的基础上 + 速度
if(attr == "opacity"){
elem.style[attr]= (cur + speed)/100; //没有px
}else{
elem.style[attr]= cur + speed +"px";
}
}
//所有的属性都到达了目标点，才能停止定时器
if(flag){
clearInterval(elem.timer);
if(fun){ //有值，说明传了回调函数
fun();
}
}
},30)
}
拿我之前写的一个轮播图对比一下效果
//这个是之前写的匀速运动的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.box{
position:relative;
width:960px;
height:320px;
border:1px solid red;
margin:20px auto;
overflow: hidden;
}
.box #lunbo::after{
content:"";
display:block;
clear:both;
}
.box #lunbo{
position:absolute;
left:0;
width:4800px;
height:320px;
}
.box #lunbo li{float:left;}
.box .circle{
position:absolute;
bottom:10px;
width:100%;
text-align: center;
}
.box .circle span{
display:inline-block;
width:14px;
height:14px;
border-radius:50%;
background-color:white;
margin-right:5px;
}
.box .circle .active{background-color:orange;}
#leftButton,#rightButton{
position:absolute;
top:120px;
width:60px;
height:80px;
background-image: url(img/btn_show.png);
background-repeat: no-repeat;
}
#leftButton{
left:0;
background-position:0 -80px;
}
#rightButton{
right:0;
background-position:0 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul id="lunbo">
<li><img src="img/one.jpg" alt="#"></li>
<li><img src="img/two.jpg" alt="#"></li>
<li><img src="img/three.jpg" alt="#"></li>
<li><img src="img/four.jpg" alt="#"></li>
<li><img src="img/one.jpg" alt="#"></li>
</ul>
<div class="circle">
<span class="active"></span><span></span><span></span><span></span>
</div>
<div id="leftButton"></div>
<div id="rightButton"></div>
</div>
<script src="js/function.js"></script>
<script>
var oBox = document.getElementById("box");
var lunboUl = document.getElementById("lunbo");
var oSpan = document.getElementsByTagName("span");
var leftBtn = document.getElementById("leftButton");
var rightBtn = document.getElementById("rightButton");
var n = 0;
//轮播图滑动
var change = function () {
n++;
if (n == 5) {
n = 1;
lunboUl.style.left = 0;
}
move(lunboUl, "left", 50, -960 * n);
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].className = "";
}
oSpan[n == 4 ? 0 : n].className = "active";
}
//定时器调用
var timer = setInterval(change, 3000);
//鼠标移入清除定时器
oBox.onmouseover = function () {
clearInterval(timer);
}
//鼠标移出恢复定时器
oBox.onmouseout = function () {
timer = setInterval(change, 3000);
}
//点击右按钮，图片下一张
rightBtn.onclick = function () {
n++;
if (n == 4) { n = 0; }
fun(n);
}
//点击左按钮，图片上一张
leftBtn.onclick = function () {
n--;
if (n < 0) { n = 3; }
fun(n);
}
//封装点击的函数
var fun = function (n) {
lunboUl.style.left = -960 * n + "px";
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].className = "";
}
oSpan[n].className = "active";
}
//通过小圆圈控制图片
for(var i=0;i<oSpan.length;i++){
oSpan[i].index=i;
oSpan[i].onclick = function(){
fun(this.index);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.box{
position:relative;
width:960px;
height:320px;
border:1px solid red;
margin:20px auto;
overflow: hidden;
}
.box #lunbo::after{
content:"";
display:block;
clear:both;
}
.box #lunbo{
position:absolute;
left:0;
width:4800px;
height:320px;
}
.box #lunbo li{float:left;}
.box .circle{
position:absolute;
bottom:10px;
width:100%;
text-align: center;
}
.box .circle span{
display:inline-block;
width:14px;
height:14px;
border-radius:50%;
background-color:white;
margin-right:5px;
}
.box .circle .active{background-color:orange;}
#leftButton,#rightButton{
position:absolute;
top:120px;
width:60px;
height:80px;
background-image: url(img/btn_show.png);
background-repeat: no-repeat;
}
#leftButton{
left:0;
background-position:0 -80px;
}
#rightButton{
right:0;
background-position:0 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul id="lunbo">
<li><img src="img/one.jpg" alt="#"></li>
<li><img src="img/two.jpg" alt="#"></li>
<li><img src="img/three.jpg" alt="#"></li>
<li><img src="img/four.jpg" alt="#"></li>
<li><img src="img/one.jpg" alt="#"></li>
</ul>
<div class="circle">
<span class="active"></span><span></span><span></span><span></span>
</div>
<div id="leftButton"></div>
<div id="rightButton"></div>
</div>
<script src="js/function.js"></script>
<script>
var oBox = document.getElementById("box");
var lunboUl = document.getElementById("lunbo");
var oSpan = document.getElementsByTagName("span");
var leftBtn = document.getElementById("leftButton");
var rightBtn = document.getElementById("rightButton");
var n = 0;
//轮播图滑动
var change = function () {
n++;
if (n == 5) {
n = 1;
lunboUl.style.left = 0;
}
// move(lunboUl, "left", 50, -960 * n);
bufferMove(lunboUl,{"left":-960 * n});
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].className = "";
}
oSpan[n == 4 ? 0 : n].className = "active";
}
//定时器调用
var timer = setInterval(change, 3000);
//鼠标移入清除定时器
oBox.onmouseover = function () {
clearInterval(timer);
}
//鼠标移出恢复定时器'
oBox.onmouseout = function () {
timer = setInterval(change, 3000);
}
//点击右按钮，图片下一张
rightBtn.onclick = function () {
change();
}
//点击左按钮，图片上一张
leftBtn.onclick = function () {
n--;
if (n <0) {
n = 3;
lunboUl.style.left = -3840+"px";
}
// move(lunboUl, "left", 50, -960 * n);
bufferMove(lunboUl,{"left":-960 * n});
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].className = "";
}
oSpan[n == 4 ? 0 : n].className = "active";
}
//通过小圆圈控制图片
for(var i=0;i<oSpan.length;i++){
oSpan[i].index=i;
oSpan[i].onclick = function(){
n=this.index;
// move(lunboUl, "left", 50, -960 * n);
bufferMove(lunboUl,{"left":-960 * n});
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].className = "";
}
oSpan[n == 4 ? 0 : n].className = "active";
}
}
</script>
</body>
</html>
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
