jQuery 幻灯片的实现原理

淡入淡出的轮播

• slide-ul 是幻灯片的盒子 包括了所有的img position: relative;
• img position: absolute; 全部隐藏，默认显示第一张图片
• pageIndex 分页索引对应 img 的索引
• 在点击分页索引时 给对应的 img 显示，其它的 img 隐藏
• 设置一个定时器函数每三秒执行一次，每次都传入 pageIndex 实现定时切换 默认是 0 判断 (pageIndex++ >= img.length) ? 0 : pageIndex++
• 鼠标移入图片清除定时器 鼠标移出时重启定时器

实例代码

    
    
    


    

        

            

            

            <
            >
        
    
    
    

轮播1在线查看

左右无缝切换的轮播

• slide-box 是包括幻灯片的盒子，设置overflow: hidden;
• slide-ul 是幻灯片的盒子（宽度为img的宽度*img的length） 包括了所有的img(浮动在一行)
• 分别给 幻灯片的盒子 最前面克隆 img 的最后一个，最后面克隆 img 的第一个 4,0,1,2,3,4,0
• 此时克隆了两个，重新给图片盒子宽度添加总长度， 给第0个写一个 left -img (一个宽度)就显示真正的第一个图片
• 每点击下一页时 (pageIndex++ > imgLength -1) ? 0 : pageIndex++; 根据对应的pageIndex操作 left
• 每点击上一页时 (pageIndex-- < 0) ? imgLength-1 : pageIndex--; 在对应的pageIndex操作 left
• 点击到最后一个和最前面一个图片时，在动画效果结果后操作css让元素left值变成对应克隆的对象left，造成一个无限切换的错觉

实例代码

    
    
    


    

        

            

            

            <
            >
        
    
    
    

轮播2在线查看

制作首页的幻灯片

• 功能结合了淡入淡出和无缝滚动

轮播3在线查看