第一次写js轮播图

Posted 天生笑点低你奈我何

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第一次写js轮播图相关的知识,希望对你有一定的参考价值。

仿小米首页轮播图(注意事项)

布局部分

1、用ul包裹li再包裹a的形式来装图片,建立focus类;

<div class="focus">
    <ul>
        <li>
            <a href="javascript;:"><img src="images/banner1.webp" height="460"></a>
        </li>
    </ul>
</div>

2、移动的时候是装着焦点图的ul来移动

  • ul里的所有li横着摆放,ul的长度可以很大,装着ul的盒子宽高和图片一样大再overflow:hidden即可;
  • 可在js里动态生成下面的索引小圆点,这样可根据焦点图数量自动调整小圆点数(动态生成的时候同时绑定事件加上效果);

3、要移动的盒子一定要有定位

  • 稍后的ul移动是改变left值来做到的,因此若ul没有定位则不起效果;

4、在ul的末尾再添加一张焦点图,第一张图片的内容

  • 作用后面说明

动画部分

1、获取所有元素结点

  • 左滑块、右滑块、小圆点、焦点图;
var focus = document.querySelector(".focus");
var circle = document.querySelector(".circle");
var sliderL = document.querySelector(".slider-l");
var sliderR = document.querySelector(".slider-r");
var cirul = circle.querySelector("ul");
var focul = focus.querySelector("ul");

2、绑定小圆点点击显示效果事件(点击效果)

  • 给每个小圆点添加一个自定义属性li.setAttribute("index",i);,用于后续的left值的变化:
    ??点击第几个就是ul移到距左边 index*imgWidth 这么长距离处

  • 图片的移动是负值,仔细想想,ul的左边距离box左边的距离,若当前为第二张焦点图,则第一张焦点图一定已经位于当前图片的左边,也就是left=-imgWidth
  • 利用排他思想,点击后,先将所有小圆点初始化为初始状态,再将当前小圆点样式变化为点击后的状态;
for(let j=0;j<len;++j) {
    cirul.children[j].style.backgroundColor = "#999";
}
this.style.backgroundColor = "rgba(0,0,0,0)";
  • 这里的图片的变化可以使用动画 animate,自己写好一个封装的函数,再直接引用调用即可:
function animate(obj, target, callback) {
        //要移动的对象,移动的目的位置,移动结束时调用的函数
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        if(obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if(callback) { //若有这个参数则调用,没有则忽略
                callback();
            }
        } else {
            var step = (target-obj.offsetLeft);
            step = step > 0 ? Math.ceil(step/10) : Math.floor(step/10);
            obj.style.left = obj.offsetLeft+step+'px';
        }
    }, 30);
}

注意:若animate在另外的js文件中,这个js文件一定要在当前js文件之前引用,不然会出现animate函数未定义的报错

3、右滑块点击事件,效果:每点击一次右滑块就向右移一张图片,若是最右的则移到第一张,且底下小圆圈同步变化

  • 用一个num全局变量记录当前移动到了哪一张图片,每点击右滑块一次num++,每次点击小圆点将点击的小圆点的index值给num
  • 若当前已经移动到了多余的那张上(它的地位实际上是第一张图片的替代),则不用动画地迅速跳回第一张,直接赋值(人类无法察觉),并将num值置为第一张的值;
if(num == len) {
//此时的len是不包括多余那张的length,且num从0开始计
    num = 0;
    //迅速跳回第一张
    focul.style.left = '0px';
}
  • 同时小圆点也要跟着变化,由于最后一张图片多余的存在,使小圆点和图片同时变化最简单的方法是另设一个全局变量cur,方法差不多不再赘述,if(cur == len) {cur = 0;}

    由于小圆点也要跟着变化,则此处也要用到排他思想

4、左滑块点击事件,效果:每点击一次左滑块就向左移一张图片,若是第一张则移到最右的一张,且底下小圆圈同步变化

  • 方法与右滑块基本相同

5、设置定时换图

  • 焦点图有个特点是,当客户无操作时,焦点图会隔固定时间定时切换图片,当客户将鼠标放到焦点图上时则取消此效果;
  • 这里不用再将代码复制粘贴,有没有发现,自动切换图片和点击右滑块效果一模一样,因此每隔固定时间模拟点击一次右滑块即可
var timer = setInterval(function() {
    sliderR.click();
}, 3000);

源码链接

以上是关于第一次写js轮播图的主要内容,如果未能解决你的问题,请参考以下文章

js实现效果:循环轮播图

用原生JS 写Web首页轮播图

原生js简单轮播图 代码

原生js写简单轮播图方式1-从左向右滑动

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

原生Js写轮播图代码