js让页面动起来 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

图片轮播

此处图片轮播原理:在container元素中水平放入图片,通过overflow属性将超出部分隐藏,然后通过js控制图片组left值达到轮播效果。

实现的html结构如下图:

轮播图原理

实现js控制动画原理如下图:

轮播图原理


编写相应的函数之前我们应该知道

  1. 我们为菜单栏加入了相应的index属性,与tab选项卡的ind属性相似,我们可以通过index找到我们想要的图片的位置
  2. 我们的play函数是前面的moveStart函数和showTab函数的结合,我们通过传入的i*图片长度计算要到达的图片的位置,通过为当前元素赋予select类名改变样式
  3. 值得注意的是我们这里采用了与showTab函数不同的处理方法,我们加入了一个变量select记录上一次改变样式的选项,取代了之前的遍历所有选项改变类名的方式
  4. 与自动切换的tab选项卡相同,在鼠标滑过菜单事件时我们清除定时器,当滑出时我们以滑出的li的index属性为参数传入auto使其开始轮播
function auto(start){
    clearInterval(autotimer);
    var i = start;
    autotimer=setInterval(function(){
        console.log(i);
        play(i);
        i++;
        if(i == img.length)
        {
            i=0;
        }
    },3000);
}
function play(i){
    clearInterval(timer);
    var target=-i * 490;
    menu_li[select].className='';
    select=i;
    menu_li[select].className='select';
    timer=setInterval(function(){
        var speed= (target - pic.offsetLeft )/10;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if(pic.offsetLeft == target)
        {
            clearInterval(timer);
        }
        pic.style.left=pic.offsetLeft+speed+'px';
    },20);
}
请大家参考我给出的play函数,自己动手写出一个play函数,再考虑能否进一步完善play函数呢?