用JavaScript实现旋转轮播图

墨蓝 2022-06-10 11:42 263阅读 0赞

# 旋转轮播图 #

最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图：  
![这里写图片描述][SouthEast]  
这个效果是这样的：一共有7张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮播图会停止自动滑动，当鼠标移开时，将会继续向左轮播。  
首先，我这里封装了两个函数（因为暂且还没有学jQuery，所以用了封装函数的方法来实现），第一个函数是$函数，调用可以获取html中的元素，代码如下：

`function $(select){
            if (typeof select != 'string') {
                console.log('传入的参数有误');         
                return null;
            }
            var firstChar = select.charAt(0);
            switch(firstChar){
                case '#':
                    return document.getElementById(select.substr(1));
                break;
                case '.':
                    if (document.getElementsByClassName){
                        return document.getElementsByClassName(select.substr(1));
                    } else {
                        var result = [];
                        var allElemnts = document.getElementsByTagName('*');
                        console.log(allElemnts);
                        for (var i = 0; i < allElemnts.length; i++){
                            var e = allElemnts[i];
                            var className = e.className;
                            var classArr = className.split(' ');
                            for (var j = 0; j < classArr.length; j++){
                                var c = classArr[j];
                                if (c == select.substr(1)) {
                                    result.push(e);
                                    break;
                                }
                            }
                        }
                        return result;
                    }
                break;
                default :
                    return document.getElementsByTagName(select);
            }
        }`

第二个函数是一个动画函数，用json实现多条样式的动态改变，从而达到一个动画效果，代码如下： \`

接下来就要写html的部分了，因为只有几张图片，所以html的部分很简单：

css样式的部分也不多做叙述。  
下面就是JS是部分啦，代码也很简单，理清楚就好

window.onload = function(){
        //定位,并给图片设置大小透明度
        var json = [{
            width: 630,
            top: 23,
            left: 0,
            zIndex: 2,
            opacity: 0
        },{
            width: 630,
            top: 23,
            left: 0,
            zIndex: 3,
            opacity: 0
        },{
            width: 630,
            top: 23,
            left: 0,
            zIndex: 4,
            opacity: 0.6
        },{
            width: 730,
            top: 0,
            left: 125,
            zIndex: 5,
            opacity: 1
        },{
            width: 630,
            top: 23,
            left: 350,
            zIndex: 4,
            opacity: 0.6
        },{
            width: 630,
            top: 23,
            left: 350,
            zIndex: 3,
            opacity: 0
        },{
            width: 630,
            top: 23,
            left: 350,
            zIndex: 2,
            opacity: 0
        }];

以上就是旋转轮播图的全部内容了，给自己的学习过程做个简单的记录，也顺便巩固一下。

[SouthEast]: /images/20220610/92ce17c3c4bd425d8d3f76037fb645bb.png