JavaScript轮播图（三）

第三种

旋转木马式：

因为以上两个轮播图，我已仔细介绍过body和css部分，所以在这里不做介绍，亦可点击下文链接查看缓动动画函数的封装

js部分：

方法一：

window.onload = function(){
        var box = document.getElementById('box');           //最外面的大盒子
        var content = document.getElementById('content');          //主图的盒子
        var imgArr = document.getElementsByTagName('img');        //图片的索引
        var pre = document.getElementById('pre');
        var next = document.getElementById('next');
        //把五张图片的css方式放到 json 中，1、5相对应，2、4相对应，（注意：此处我写的位置全部相对于主图盒子，当然也可以以最外层的大盒子为参考，可以先在css中把样式写完然后在拿过来）。
        var json1 = {"width":400,"zIndex":1,"opacity":30,"left":-140,"top":-40};
        var json5 = {"width":400,"zIndex":1,"opacity":30,"left":540,"top":-40};
        var json3 = {"width":800,"zIndex":100,"opacity":100,"left":0,"top":0};
        var json2 = {"width":600,"zIndex":20,"opacity":80,"left":-200,"top":40};
        var json4 = {"width":600,"zIndex":20,"opacity":80,"left":400,"right":-200,"top":40};
            //定义一个数组，把json对象放到数组中去
            var arr = [json1,json2,json3,json4,json5];

            var currentIndex = 0;    //定义一个索引
            function auto(){          //当你刷新界面的时候，图片全部从中间的盒子，缓动到相对应的位置。
                for(var i = 0; i < imgArr.length; i++){
                    animate(imgArr[i],arr[i]);
                }
            }
            auto();

            function preImg(){         //上一张图片，即左侧按钮
                for(var i = 0; i < imgArr.length; i++){
                    animate(imgArr[i],arr[(currentIndex+1)%5]);    //当执行这个函数时，所有的图片移动到对应索引加1的位置。
                    currentIndex++;                 //索引要加1，以保证所有的图片和索引相对应
                    if(currentIndex>5){
                        currentIndex %= 5;
                    }
                }
                currentIndex++;                 //当执行一次这个函数时，对应的索引整体加1
                console.log(currentIndex);
            }
            function nextImg(){             
                for(var i = 0; i < imgArr.length; i++){
                    if(currentIndex <= 0){        //把索引规定在一定的范围内
                        currentIndex += 5;
                    }
                    animate(imgArr[i],arr[(currentIndex - 1)%5]);       //当你执行下一张图片函数时，所有的图片要运动到下一个位置，如0对应的图片运动到4的位置，1到0的位置。
                    // 0    4
                    // 1    0
                    // 2    1
                    // 3    2
                    // 4    3
                    // 5    4
                    currentIndex++;      //随着i的增加，索引增加
                    if(currentIndex>5){
                        currentIndex %= 5;
                    }
                }
                currentIndex--;        //执行一次函数后，整体索引减1。
            }
            pre.onclick = preImg;      //当你点击左侧按钮时，执行左侧
            next.onclick = nextImg;       //当你点击右侧按钮时，执行右侧
}

方法二：

var arr = [json1,json2,json3,json4,json5]
    var currentIndex = 0;    //代表图片的位置
    function auto(currentIndex){
        for(var i = 0; i < imgArr.length; i++){
            var locationIndex = i - currentIndex;       //当curentIndex++时，0对应-1,  当再次执行currentIndex++时，此时编号为0的图片在-1位置， 0对应-2， 即编号为0的图片，从-1位置移动到-2位置
            if(locationIndex < 0){          //因为位置范围为0~4，所以每当他小于0时，执行加5操作，同样当他等于5时，就把它化为0。
                locationIndex += 5;
            }
            animate(imgArr[i],arr[locationIndex]);
        }
    }
    auto(0);    //刷新页面时传入0  

    next.onclick = function(){
        currentIndex++;
        if (currentIndex == 5) {      
            currentIndex = 0;
        }
        auto(currentIndex);
        console.log(currentIndex);
    }
    pre.onclick = function(){
        currentIndex--;
        if(currentIndex < 0){
            currentIndex = 4;
        }
        auto(currentIndex);
    }

注意：方法一和方法二轮播的方法是相反的
第一种轮播图链接：http://blog.csdn.net/qq_33599109/article/details/77249062
缓动动画函数封装：http://blog.csdn.net/qq_33599109/article/details/77257182

作者：kuke_kuke
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！