webapi6之淘宝轮播图案例

webapi6

缓动动画原理：
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路：
// 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
var step = (target - obj.offsetLeft) / 10;
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + ‘px’;

        }, 15);
    }
    var span = document.querySelector('span');
    var btn = document.querySelector('button');

    btn.addEventListener('click', function() {
            // 调用函数
            animate(span, 500);
        })
        // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
        // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
</script>

缓动动画多个目标值之间移动：

点击夏雨荷到500 点击夏雨荷到800 夏雨荷 动画函数如何添加回调函数？ 点击夏雨荷到500 点击夏雨荷到800 夏雨荷 常见网页特效案例： 缓动动画添加回调函数：

←

问题反馈

<script>

var sliderbar=document.querySelector(’.sliderbar’);
var con=document.querySelector(’.con’);
sliderbar.addEventListener(‘mouseenter’,function(){
antimate(con,-160,function(){
sliderbar.children[0].innerHTML=‘→’;
});
})
sliderbar.addEventListener(‘mouseleave’,function(){
antimate(con,0,function(){
sliderbar.children[0].innerHTML=‘←’;
});
})

轮播图：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏按钮
2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
3.图片播放的同时，下面小圆圈模块跟随一起变化
4.点击小圆圈可以播放相应图片
5.鼠标不经过轮播图，轮播图可会自动播放
6.鼠标经过轮播图模块，自动播放停止

1.1）js较多，新建js文件夹
2）此时需要添加load事件
3）鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
window.addEventListener(‘load’,function(){
var arrow-l=document.querySelector(’.arrow-l’);
var arrow-r=document.querySelector(’.arrow-r’);
var focus=document.querySelector(’.focus’);
focus.addEventListener(‘mouseenter’,function(){
arrow-l.style.display=‘block’;
arrow-r.style.display=‘block’;
clearInterval(timer);
timer=null;
}
focus.addEventListener(‘mouseleave’,function(){
arrow-l.style.display=‘none’;
arrow-r.style.display=‘none’;
timer=setInterval(function(){
arrow_r.click();
},2000);
}
动态生成小圆圈
小圆圈的个数要跟图片张数一致
所以首先得到ul里面图片的张数（图片放入li里面，所以就是li的个数）
利用循环动态生成小圆圈（这个小圆圈要放到ol里面）
创建节点createElement(‘li’)
插入节点ol.appendChild(li)
ol里面的第一个小li设置类名为current
var ul=focus.querySelector(‘ul’);
var ol=focus.querySelector(’.circle’);
for(var i=0;i<ul.children.length;i++){
li.setAttributte(index,i);
var li=document.createElement(‘li’);
ol.appendChild(li);
小圆圈的排他思想可以再生成小圆圈的同时绑定点击事件
1）点击当前小圆圈就添加current类
2）其余的小圆圈就移除这个current类
li.addEventListener(‘click’,function(){
for(var i=0;i<ul.children.length;i++){
ul.children[i].className=’’;
}
this.className=‘current’;
点击小圆圈滚动图片
1）此时用到animate动画函数，将js文件引入（注意，因为index.js依赖animate.js所以，animate.js要写到index.js上）
2）使用动画函数的前提，该元素必须有定位
3）注意是ul移动而不是小li
4）核心算法：点击某个小圆圈，就让图片滚动，小圆圈的索引号乘以图片的宽度作为ul移动距离
5）此时需要知道小圆圈的索引号，我们可以再生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定义属性即可
var index=this.getAttribute(‘index’);
num=index;
circle=index;
var focusWidth=focus.offsetwidth;
console.log(focusWidth);
console.log(index);
animate(ul,-indexfocusWidth);
})
}
ol.children[0].className=‘current’;
)
**克隆第一张图片
1）克隆ul第一个li cloneNode（）加true深克隆 复制里面的节点 false浅克隆
2）添加到ul最后面aooendChild
var first=ul.children[0].cloneNode(true);
ul.appendChild(first);
1）点击右侧按钮一次，就让图片滚动一张
2）声明一个变量num，点击一次，自增1，让这个变量乘以图片宽度，就是ul的滚动距离
3)无缝滚动：
克隆一个跟第一张一样的放到最后一张，跳到第一张
箭头添加z-inex，层级关系
a连接href改为javascript：；
//点击右侧按钮i，小圆圈跟随一起变化，可以在声明一个变量控制小圆圈的播放
var circle=0;
var num=0;
var flag=true;
arrow-r.addEventListener(‘click’,function(){
if(flag){
flag=false;
if(num==ul.children.length){
ul.style.left=0;
num=0;
}
num++;
animate(ul,-numfocusWidth);
flag=true;
circle++;
if(circleol.children.length){
circle=0;
}
circlrChange();
});
arrow-l.addEventListener(‘click’,function(){
if(flag){
flag=flase;
if(num0){
num=ul.children.length-1;
ul.style.left=-num*focusWidth+‘px’;

}
num–;
animate(ul,-num*focusWidth);
flag=true;
circle–;
if(circle<0){
circle=ol.children.length-1;
}
//circle=circle<0?ol.children.length-1:circle;
}
}
circleChange();
});
function() circleChange(){
for(var i=0;i<ol.children.length;i++){
ol.children[i].className=’’;
}
ol.children[circle].className=‘current’;
}
自动播放功能：
手动调用右侧按钮点击事件：arrow_r.click()
var timer=setInterval(function(){
arrow_r.click();
},2000);

})

var current=0;
var ul=document.querySelector(‘ul’);
var lis=ul.querySelectorAll(‘li’);
for(var i=0;i<lis.length;i++){
lis.addEventListener(‘mouseenter’,function(){
antimate(cloud,this.offsetLeft);
});
lis[i].addEventListener(‘mouseleave’,function(){
antimate(cloud,current);
})
lis[i].addEventListener(‘click’,function(){
current=this.offsetLeft;

})
}

让窗口滚动到顶部的特定位置：
window.scroll(x,y);
使用缓动函数缓慢滚动。水平改为垂直
window.scroll(0,window.pageYOffset+step);
节流阀:
当上一个函数动画执行完毕，再去执行下一个函数动画让事件无法连续触发
移动端网页特效
触屏事件：
touch
touchstart 手触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑时触发
touchend 手指从一个DOM元素上移开始触发

触摸事件对象TouchEvent
touches 正在触摸屏幕所有手指的一个列表
targetTouches 正在触摸当前DOM元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表
移动端拖动元素：