图片轮播（三维特效）

男娘i 2024-04-18 08:27 19阅读 0赞

轮播

> 1.三维轮播时，定时器的时间减去过渡动画时间等于停留时间  
> 2.图片如果有a链接，为了浏览器的兼容性，要加上`border:0`;防止在IE上点击图片后有蓝色边框  
> 3. js中严格区分大小写，如案例中的classname  
> 4.图解过程

![在这里插入图片描述][20190904000730779.png_pic_center]

## 案例一——三维轮播 ##

#### 实现效果 ####

![在这里插入图片描述][20190904212906649.gif]

#### 设计思路 ####

1.  画好界面，确定好每张图片的位置
2.  定时器，开始轮播
3.  鼠标进入离开事件
4.  添加点（点的颜色要跟随图片变化——索引对应图片）  
    点的颜色一直添加失败  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]
5.  当鼠标在电上快速移动时图片显示乱码：应该在return之前就清除计时器，否则会造成计时器累加，return后直接跳出函数，不执行后续语句

## 案例二：淡入淡出 ##

#### 实现效果 ####

![在这里插入图片描述][20190904212949599.gif]

#### 设计思路 ####

**1. 设置层的情况**  
1）一般图片为超链接  
![在这里插入图片描述][20190904001022947.png]  
2）使用for循环依次给每张图片设置zindex()，最上面（第一张）zindex值最大，等于 长度-1-i;(六张图片的zindex值为0~5)

**2. 写层的动画**  
1）因为要考虑之后的按钮事件和点事件对图片图层的影响，所以设置控制方向和移动图片的参数  
2）在写动画时为了方便之后调用，都将计时器赋给变量timer方便之后取消计时器等，并且将后面需要频繁调用的方法封装在一个函数里（比如设置层和添加颜色）  
3）默认是顺时针正向变化，count值为1，即每次一张一张图片移至最后面  
4）为了在后面实现图层加1，应该提前转换parseint，否则+1时为字符串拼接  
5）For循环count次，内循环修改每张图片的透明度及图层

**3. 添加淡入淡出动画**  
1）添加完成后增加定时器，显示动画效果  
transition: opacity .6s ease-in-out;

**4. 写圈圈动画** 默认第一个有颜色 —对应的图片对应的圈 变化  
1）选中时如果当前值等于当前索引，添加颜色类  
2）难点：找到图片与点对应的索引

**5. 添加事件 鼠标进入和离开**  
1）计时器清除和动画效果再次添加（在前面将动画效果封装）

**6. 给点添加事件,当前点变色 显示当前对应的图片**  
记录顶层图片换至底层的次数；调用设置图层的函数，通过传参动态设置即实现了点和图片的对应  
记录index

**7. 给两个箭头添加点击事件操作动画**  
1)传参调用设置图层函数（控制左右方向）  
2)添加点变色

## 案例三：横向滚动 ##

#### 零碎 ####

> 1.  找到合适的值用作索引（比如此次使用count值作为索引）
> 2.  和简单的图片无缝滚动相似，因为可视区域只有一张图片，所以只需要在最后添加一张和第一张相同的照片即可达到想要的切换效果
> 3.  同理将定时器赋给变量timer方便鼠标进入时清除；将计时器封装在动画效果函数中方便恢复计时器；将图片移动单独封装为一个函数方便左右点击按钮调用；将添加点的动画封装起来方便在各个部分调用
> 4.  在给点添加事件时同理取不到索引值，把i赋值给当前点的index
> 5.  点的切换时距离近的点切换时速度慢，距离远的点切换时速度快（相同时间内需要切换的图片数量不同）

#### 实现效果 ####

![在这里插入图片描述][20190904210917975.gif]

#### 设计思路 ####

**1. 图片移动**  
添加动画移动效果transform类，count记录左移的图片数量从而计算margin-left的值，当走到最后一张（和第一张相同的图片时）取消移动的动画效果直接跳到第一张，之后添加点的颜色

/*动画效果*/
        function animate() { 
            timer = setInterval(function () { 
                picmove();
            }, speed)
        }
        /*图片滑动*/
        function picmove() { 
            content.className = "content tran";
            /*不能为定值，用count记录*/
            count++;
            content.style.marginLeft = (-500 * count) + "px";
            setTimeout(function () { /*处理最后一张直接跳到第一张*/
                //判断本次图片动画是否结束
                if (count >= content.children.length - 1) { 
                /*如果走到最后一张调到第一张*/
                    content.className = "content";
                    count = 0;
                    content.style.marginLeft = "0px";
                }
                index = count == 6 ? 0 : count;
                addColor();
            }, 400)
        /*和渐变的时间相同或者少快一些才会让图片和点动态变化效果同步*/
        }

**2. 点的颜色**  
for循环遍历点，如果当前的点被选中添加颜色类

//添加点的颜色
        function addColor() { /*封装后初始化调用*/
            for (var i = 0; i < dian.length; i++) { 
                if (i == index) { 
                    dian[i].className = "bgcolor";
                }
                else { 
                    dian[i].className = "";
                    //classname js中严格区分大小写！！！
                }
            }
        }

**3. 给点添加事件和鼠标进入离开事件**  
for循环取不到索引值，当鼠标进入点时将合适的索引值赋值给count，调用图片移动函数，记录当前索引以添加颜色

/*鼠标事件*/
        function mouse() { 
            big.onmouseenter = function () { 
                clearInterval(timer);
            }
            big.onmouseleave = function () { 
                animate();
            }
            /*点 的事件*/
            for (var i = 0; i < dian.length; i++) { 
                dian[i].index = i;
                dian[i].onmouseenter = function () { 
                    count = this.index-1;/*count控制margin-left*/
                    picmove();
                    /*距离近的元素移动慢——相同时间距离小速度快*/
                    index = this.index;//当前点变色
                    addColor();
                }
            }
        }

**4. 左右按钮事件**  
右按钮直接调用图片移动函数；左按钮与右按钮效果相反，count–后判断count值

> 延迟时间：添加按钮事件时，左边按钮切换图片后直接添加点的颜色导致动画效果和点的颜色同时变化（内定时器的作用）定时器里面再写定时时不能使用setinterval；并且因为有动画效果类的添加和取消所以要有时间间隔（否则没有效果——1的作用）

**5. 浏览器加载事件**

window.onload = function () { 
            animate();
            addColor();
            mouse();
            btn();
        }

**html**

**css**

[20190904000730779.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0a05d253a5014c0b907a436e8c97b136.png
[20190904212906649.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8ad4891646644d3a865053dc4d93c789.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ce32153e99a14d5c96098128c29a59d3.png
[20190904212949599.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fcc26002220141a3b09b6d4475eb5f8e.gif
[20190904001022947.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/840c7482759b4b4fab83c78646fdc7ee.png
[20190904210917975.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c4fcabd144fa4c72b8c50dd6b68de44b.gif