制作焦点图中的思考

Posted 2020-08-02

      好些天前就该写这篇文章的，不过一直偷懒，今天还是总结一下之前遇到的问题，一方面回忆一下当时的情况，看看会不会有别的收获；另一方面也方便以后自己回顾。第一次接触轮播图的时候接触的是普通版本（不是无限轮播），五张图片对应五个小方块，自动循环，这个版本在最后一张切换到第一张时有个明显的跳跃，体验不好，当时我想的是按照无限滚动字幕的方式，在后面再给他加上五张一样的图，两组图动态切换，一组图播完了，就自动插到第二组的后面。

    

这个想法有个问题，如果使用者手动向上切换，那从第一张调到最后一张时，还是会有明显的跳跃，也就是还需要在前面加上五张图。

         

仔细想想这种方法的太笨了，为了播五张图，一共用了15张，非常不经济。后来看了个慕课网的教程，里面提供的方法是在首尾各加一张图，第一张前面加上最后一张图，最后一张后面加上第一张图，这样一共七张图就搞定了。当图片切换到第一张那张图时，立即跳到第六张图，同样，当图片切换到第七图时，立即跳到第二张图，因为两张图分别相同，所以不会有视觉上的变化。

       按照这个思路，我开始做用原生JS写得版本，这次编写实在上次那个普通版本基础上进行的，看着这一个多月前的代码，感觉好些地方不顺眼，虽然现在的代码也还是很挫，我根据最佳实践的原则，稍微优化了一下代码，缩短了语句，解耦了应用逻辑和事件处理程序。我是凭着印象编写，再和原来的代码比对这样编写的，在编写过程中我遇到了下面这些问题，这些之前也遇到过，只是当时没在意，直接略过了，这次花了点时间去了解一下：

        1.函数名带后面带圆括号和不带圆括号的区别，我通过函数声明创建了一个函数，准备把他绑定到mouseover事件上，刚开始我习惯性的写上

oUl.onmouseover = stop（）;

发现有问题，没有我想要的效果，查看了一下原来的代码，原来stop后面不应该加圆括号，我想起来加不加圆括号是有区别的，但具体是什么区别我不清楚，查了一圈，得出的结论是不带圆括号的是函数指针，不执行函数，带圆括号的是执行函数的结果，在这里需要的是把函数的指针赋给事件，方便需要的时候调用，而不是现在就执行函数，所以不应该加圆括号，所以应该是

oUl.onmouseover = stop;

         2.轮播图的中心思想就是改变图片的left值，我把其他工作都完成，但发现图片居然不会动，找来找去发现代码没错呀，呼唤了无数次大爷后，去查看了一眼html代码，发现在这里少了一个东西，设置left初始值，这次教训让我对初始化参数这件事更注意了。

<ul id="banner_imgs" style="left: -800px;">

        3.这个问题比较旦疼，原本是五张图对应五个小方块，现在多跑出来两张图，需要修改，因为对之前的代码认识不深，所以修改的时候老是不行，我总希望把小方块的for循环中的参数i直接用到图片上，

for (var i=0,olen=oA.length;i<olen;i++) {           
                oA[i].onclick = function(){
                if (mark) {
                    return;
                }
                if (hasClass(this,"now")) {
                    return;
                }
                var myIndex = i;
                var offset = -picWidth*(myIndex-index);
                animate(offset);
                index = myIndex;
                getChange();
            }
        }

发现不行！没办法我就alert了一下myIndex，发现他居然等于oA的长度，折腾来折腾去，就是不行，当时看到的教程是在小方块的HTML中添加一个index属性，然后在这里使用，但是我觉得不是强调结构和行为的分离吗，这样做不科学呀。但折腾很久后还是搞不定，只能屈服了，使用了教程上的方法，这在我心里留下了一个疙瘩。

        <a index="1" href="javascript:;" class="now"></a>
        <a index="2" href="javascript:;"></a>
        <a index="3" href="javascript:;"></a>
        <a index="4" href="javascript:;"></a>
        <a index="5" href="javascript:;"></a>

今天我重新回看这段代码的时候，干嘛不通过for循环给a标签动态添加index属性，因为教程上用的是getAttribute()获取，所以我刚开始想的也是使用setAttribute()添加index属性，后来想想，还可以直接添加属性，于是就写为

var myIndex = this.index;

发现没问题，仔细看看，这个式子在别处见过好几次，当时没太明白是干什么，现在才注意到这就是为了把每个元素的索引复制给他本身的属性，这样就可以正常使用了。这样JS的版本就可以正常运行了。
      编写jQuery版本的时候要顺利许多，只是因为少有用jQuery，所以对于选择器和相关方法不太熟悉，有些时候需要去查看资料。总的感觉就是多多练习确实大有好处，许多问题只有在练习中遇到才会去思考，才能真正理解，看书或者视频对于很多问题的理解不会那么深刻，好些以为明白的，也未必真的明白了，所以还是要多找项目练手才好。