【分享】使用原生JS实现的一个经典轮播图导航栏效果

向善的灯 · 发表于 2018-10-2 19:45

本帖最后由向善的灯于 2018-10-13 12:54 编辑

总共的实现代码也就300行吧，主要用到的技术有html,css,js等。

最终的效果图如上，主要的知识点包括：JavaScript定时器，CSS布局（这块是核心，做的好不好看就在这块了）
GItHub源码：
如果觉得还不错的各位亲们，欢迎给个Star哈，你的支持就是我前进的动力！

https://github.com/xiugangzhang/vip.github.io/blob/master/index.html

首先来看下主文件：这块是index.html，这里是把js代码和HTML代码写在了一块，基本上在相关的代码位置上都写上了注释，方便大家学习交流：

其他的几个发布在吾爱的项目：
【分享】试试我开发的这个【超级马里奥游戏】，看下自己能不能撑过30秒
https://www.52pojie.cn/thread-804616-1-1.html
(出处: 吾爱破解论坛)
【分享】苏拉卡尔塔（Surakarta）游戏项目及源码分享（欢迎体验试玩）
https://www.52pojie.cn/thread-803871-1-1.html
(出处: 吾爱破解论坛)
使用HTML5 canvas开发的一个中国象棋游戏
https://www.52pojie.cn/thread-803372-1-1.html
(出处: 吾爱破解论坛)

如果觉得不错也麻烦大家给个star支持一下哈，毕竟码代码也不容易哈。
GitHub：https://github.com/xiugangzhang

以上就是自己在过去一段时间里分享的一些项目了，因为开发一个不错的项目也不容易哈，也就在这里积点人气，给个star支持一些，有什么问题和建议也欢迎大家吐槽哈。

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./xframe-min-1.0.js"></script>
</head>
<body>
<!--main start-->
<div class="main">
    <div class="w">
        <div class="main-slider" style="width: 1210px">
            <div class="main-item">
                <a class="first" href="#">
                </a>
                <a class="current" href="#">
                    <span class="current-title">陈翔六点半铁头无敌</span><span class="current-content">铁头传人战江湖</span>
                </a>
                <a href="#">
                    <span>狄仁杰之四大天王</span><span>韩庚郑恺战前任</span>
                </a>
                <a href="#">
                    <span>前任3再见前任</span><span>靓汤高空徒手扒飞机</span>
                </a>
                <a href="#">
                    <span>碟中谍神秘国度</span><span>佛魔大战一触即发</span>
                </a>
                <a href="#">
                    <span>降魔武僧</span><span>赵文卓洪金宝抗倭</span>
                </a>
                <a href="#">
                    <span>荡寇风云</span><span>赵文卓洪金宝抗倭</span>
                </a>
                <a href="#">
                    <span>家有喜事</span><span>家有喜事删减片段曝光</span>
                </a>
                <a href="#">
                    <span>唐人街探案2</span><span>王宝强爆笑破案</span>
                </a>
                <a class="last" href="#">
                </a>
            </div>
            <!--这是一个空盒子-->
            <a href="javascript:void(0);" class="arrow-l"><</a>
            <a href="javascript:void(0);" class="arrow-r">></a>
        </div>
    </div>
</div>
<!--main end-->


<script>
    //首页轮播图效果开始------------------------------------------------------------------------------------------
    /**
     * 使用面向对象的方式封装这个轮播图效果
     */
    function imgShow() {
    }

    /**
     * 首页的电影效果轮播图效果实现
     */
    imgShow.prototype = {
        imgs: [],         // 图片数组
        num: -1,           // 初始的图片下标
        currentNumber: 0,     // 当前展示的图片下表编号
        elements: null,        // 存储获取的DOM元素

        /**
         * 输入图片路径信息之后， 开启轮播图效果
         * @param imgs
         */
        start: function (imgs) {
            this.init(imgs);
        },
        /**
         * 输入参数初始化
         * 事件处理模块初始化
         * @param imgs
         */
        init: function (imgs) {
            // 初始化输入参数
            this.initParas(imgs);
            // 主程序入口
            this.autoPlay();
            // 事件初始化
            this.initEvent();
        },
        /**
         * 输入参数初始化
         * @param imgs
         */
        initParas: function (imgs) {
            this.imgs = imgs;
            // 初始化选择元素
            this.elements = $('.main-item a');
            // 初始化图片背景
            $('.main-slider').css('background', 'url(' + this.imgs[0] + ')').css('background-size', '100%');
            // IE  兼容
            $('.main-slider').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' + 'src=' + this.imgs[0] + ',sizingMethod="scale")');
        },
        /**
         * 事件处理初始化
         */
        initEvent: function () {
            this.mouseover();
            this.click();
        },
        /**
         * 自动移动项的实现（图片随项一起移动）
         * @param index
         */
        itemMove: function (index) {
            // 移动之后，找到相应的li-item，改变他的样式
            var lis = $('.main-item a');
            if (lis === null) {
                return;
            }
            lis.each(function () {
                var a = this.childNodes;
                if (a && a.length === 4) {
                    if (this.className === 'current') {
                        this.className = '';
                    }
                    a[1].className = '';
                    a[2].className = '';
                } else if (a && a.length === 3) {
                    if (this.className === 'current') {
                        this.className = '';
                    }
                    a[0].className = '';
                    a[1].className = '';
                }
            });

            // 把当前的设置为样式 index = 0, 则切换为第0个li标签
            var current = lis[index + 1];
            current.className = 'current';
            if (current && current.childNodes && current.childNodes.length === 4) {
                // chrome
                current.childNodes[1].className = 'current-title';
                current.childNodes[2].className = 'current-content';
            } else if (current && current.childNodes && current.childNodes.length === 3) {
                //IE
                current.childNodes[0].className = 'current-title';
                current.childNodes[1].className = 'current-content';
            }
        },
        /**
         * 鼠标移动事件处理模块
         */
        mouseover: function () {
            // 获取所有的li标签
            var lis = this.elements;
            var self = this;
            lis.on('mouseover', function (e) {
                if (this.className === 'first' || this.className === 'last') {
                    return;
                }
                lis.each(function () {
                    var a = this.childNodes;
                    if (a && a.length == 4) {
                        if (this.className === 'current') {
                            this.className = '';
                        }
                        a[1].className = '';
                        a[2].className = '';
                    } else if (a && a.length === 3) {
                        if (this.className === 'current') {
                            this.className = '';
                        }
                        a[0].className = '';
                        a[1].className = '';
                    }
                });
                // 把当前的设置为样式
                if (this.childNodes && this.childNodes.length === 4) {
                    // 谷歌浏览器 W3C
                    var current = this.childNodes;
                    this.className = 'current';
                    current[1].className = 'current-title';
                    current[2].className = 'current-content';
                    //  原始的实现可以通过父节点的所有孩子节点变遍历的方式来判断，srcNode.parentNode.childNodes[index] === srcNode
                    // 设置完毕之后， 修改与之相对应的图片样式信息
                    $('.main-slider').css('background', 'url(' + self.imgs[$(this).index() - 1] + ')').css('background-size', '100%');
                } else {
                    // IE 浏览器
                    var target = $.getTarget(e);
                    var current = target.childNodes;
                    target.className = 'current';
                    if (current && current.length === 3) {
                        current[0].className = 'current-title';
                        current[1].className = 'current-content';

                        //  原始的实现可以通过父节点的所有孩子节点变遍历的方式来判断，srcNode.parentNode.childNodes[index] === srcNode
                        // 设置完毕之后， 修改与之相对应的图片样式信息
                        $('.main-slider').css('background', 'url(' + self.imgs[$(target).index() - 1] + ')').css('background-size', '100%');
                    }
                }

            });
        },
        /**
         * 鼠标单击事件处理模块
         */
        click: function () {
            var self = this;
            $('.arrow-l').on('click', function (e) {
                self.currentNumber--;
                if (self.currentNumber < 0) {
                    self.currentNumber = self.imgs.length - 1;
                }
                $('.main-slider').css('background', 'url(' + self.imgs[self.currentNumber] + ')').css('background-size', '100%');

                // 设置为自动移动标签项
                self.itemMove(self.currentNumber);
                self.num = self.currentNumber;
            });

            $('.arrow-r').on('click', function (e) {
                self.currentNumber++;
                if (self.currentNumber > self.imgs.length - 1) {
                    self.currentNumber = 0;
                }
                $('.main-slider').css('background', 'url(' + self.imgs[self.currentNumber] + ')').css('background-size', '100%');

                // 设置为自动移动
                self.itemMove(self.currentNumber);
                self.num = self.currentNumber;
            });

        },
        /***
         * 轮播图自动播放的实现
         */
        autoPlay: function () {
            var self = this;
            setInterval(function () {
                self.num++;
                $('.main-slider').css('background', 'url(' + self.imgs[self.num % 8] + ')').css('background-size', '100%');
                $('.main-slider').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' + 'src=' + self.imgs[self.num % 8] + ',sizingMethod="scale")');
                self.currentNumber = self.num % 8;

                // 开始移动item项
                self.itemMove(self.currentNumber);
            }, 4000);
        }
    }


    /**
     * 轮播图效果的启动
     * @param ev
     */
    window.onload = function () {
        // 图片数组初始化
        var imgs = [
            '../www/images/big0.jpg',
            '../www/images/big1.jpg',
            '../www/images/big2.jpg',
            '../www/images/big3.jpg',
            '../www/images/big4.jpg',
            '../www/images/big5.jpg',
            '../www/images/big6.jpg',
            '../www/images/big7.jpg',
        ];


        // 初始化参数，启动
        var run = new imgShow(imgs);
        run.start(imgs);
    }
</script>
</body>
</html>

下面的这个是index.css文件，主要是样式布局文件：

[JavaScript] 纯文本查看 复制代码

[url=home.php?mod=space&uid=697496]@charset[/url] "UTF-8";
.main-item a, .main-slider ul li {
    width: 250px;
    color: #000;
    font: 400 14px/37px 'Microsoft YaHei'
}

.arrow-l, .arrow-r, .main-item a {
    display: block;
    text-align: center
}

.main {
    padding-top: 90px
}

.main-slider {
    cursor: pointer;
    height: 420px;
    background-size: 100%;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
    -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=5);
    -webkit-box-reflect: below -122px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(white))
}

.main-item, .main-slider ul {
    position: absolute;
    right: 70px
}

.main-item a {
    height: 42px;
    background-color: rgba(211, 201, 191, .8)
}

.main-slider .first {
    width: 250px;
    height: 25px;
    background: -webkit-linear-gradient(rgba(211, 201, 191, .5), rgba(211, 201, 191, .8));
    background: -moz-linear-gradient(top, rgba(211, 201, 191, .5) 100%, rgba(211, 201, 191, .8) 0);
    background: -o-linear-gradient(top, rgba(211, 201, 191, .5) 100%, rgba(211, 201, 191, .8) 0);
    background: -ms-linear-gradient(rgba(211, 201, 191, .5), rgba(211, 201, 191, .8))
}

.main-slider .last {
    width: 250px;
    height: 25px;
    background: -webkit-linear-gradient(rgba(211, 201, 191, .8), rgba(211, 201, 191, .5));
    background: -moz-linear-gradient(top, rgba(211, 201, 191, .8) 0, rgba(211, 201, 191, .5) 100%);
    background: -o-linear-gradient(top, rgba(211, 201, 191, .8) 0, rgba(211, 201, 191, .5) 100%);
    background: -ms-linear-gradient(rgba(211, 201, 191, .8), rgba(211, 201, 191, .5))
}

.main-slider ul li {
    height: 42px;
    background-color: rgba(211, 201, 191, .8);
    text-align: center
}

.main-slider ul li:not(.first,.last) {
    background-color: #F7F7F8;
    cursor: pointer
}

.main-slider ul:hover {
    cursor: pointer
}

.arrow {
    position: relative;
    height: 200px;
    background-color: #1da1f2
}

.arrow-l, .arrow-r {
    position: absolute;
    top: 50%;
    margin-top: -31px;
    width: 28px;
    height: 62px;
    font: 400 22px/62px '宋体';
    background: rgba(0, 0, 0, .3);
    color: #fff
}

.arrow a:hover {
    color: #fff;
    background: rgba(0, 0, 0, .6)
}

.arrow-r {
    right: 320px
}

.arrow-l {
    left: 0
}

.main-slider .current {
    background-color: #F7F8F8;
    height: 76px;
    position: relative
}

.main-slider .current-title {
    height: 30px;
    font: 700 24px/30px '黑体';
    color: #FF6428;
    float: left;
    position: absolute;
    top: 10px;
    left: 10px
}

.main-slider .current-content {
    float: left;
    position: absolute;
    bottom: 10px;
    left: 15px
}

.movies {
    margin-top: 15px
}

.movies-type {
    float: left;
    width: 100%;
    margin-top: 22px
}

.movies-type h1 {
    font: 700 24px/55px 'Microsoft YaHei';
    margin-bottom: 10px;
    border-left: 5px solid #ff8b20;
    padding-left: 15px
}

.movies-type ul li {
    float: left;
    width: 107px;
    height: 40px;
    background-color: #ff8b20;
    margin-right: 5px;
    font: 400 18px/40px 'Microsoft YaHei';
    text-align: center;
    color: #fff
}

.movies-type ul li:hover {
    cursor: pointer;
    background-color: #ffbd23
}

.animes-content, .movies-content, .tvs-content, .tvshows-content {
    margin-top: 16px;
    padding-left: 10px;
    float: left;
    text-align: center;
    position: relative
}

.animes-content ul, .movies-content ul, .tvs-content ul, .tvshows-content ul {
    display: table;
    text-align: center
}

.animes-content, .tvs-content, .tvshows-content {
    display: none
}

.animes-content ul li, .movies-content ul li, .tvs-content ul li, .tvshows-content ul li {
    float: left;
    width: 195px;
    height: 374px;
    text-align: center;
    color: #fff;
    background-color: #F8F8F8;
    margin-right: 10px;
    margin-top: 12px;
    padding: 0 14px
}

.movies-img, .movies-img img {
    height: 262px;
    width: 195px;
    float: left
}

.movies-img {
    display: block;
    font: 400 18px/262px 'Microsoft YaHei';
    color: #fff;
    cursor: pointer;
    z-index: 1
}

.movies-img img {
    border-radius: 10px
}

.movies-info {
    margin-top: 1px;
    height: 56px;
    width: 195px;
    background-color: #FEFEFE;
    float: left;
    color: #000
}

.movies-info .movies-contentname {
    display: block;
    height: 28px;
    line-height: 28px;
    width: 195px;
    background-color: #fff;
    font: 16px 'Microsoft YaHei'
}

.movies-info .movie-desc {
    float: left;
    display: block;
    height: 28px;
    width: 195px;
    line-height: 28px;
    font-size: 13px;
    color: #999
}

.movie-top {
    position: relative
}

.movie-vip {
    float: left;
    position: absolute;
    width: 32px;
    height: 20px;
    background-color: #FC3F4C;
    top: 4px;
    right: 4px;
    color: #fff;
    font: 400 15px/20px 'Microsoft YaHei';
    border-radius: 4px;
    text-align: center;
    cursor: pointer
}

.movie-num, .movie-score {
    position: absolute;
    background-color: rgba(0, 0, 0, .7);
    text-align: center;
    cursor: pointer
}

.movies-page ul li, .movies-play {
    float: left;
    border: 1px solid #2fa4e7
}

.movie-num {
    width: 100px;
    height: 20px;
    left: 0;
    bottom: -244px;
    color: #FC3F4C;
    line-height: 20px
}

.movie-score {
    right: 10px;
    bottom: -248px;
    width: 38px;
    height: 30px;
    color: #FF5F33;
    font: 14px/30px 'Microsoft YaHei';
    transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2)
}

.score-strong {
    font-Size: 24px
}

.movies-play {
    display: block;
    font: 400 18px/40px 'Microsoft YaHei';
    height: 40px;
    line-height: 40px;
    width: 195px;
    color: #000;
    cursor: pointer
}

.movies-play:hover {
    background-color: #2fa4e7
}

.movies-page {
    margin-top: 70px;
    float: left;
    position: relative
}

.movies-page ul {
    position: absolute;
    margin-left: -172px;
    left: 50%
}

.movies-page ul li {
    margin-left: -1px;
    font: 400 14px/34px 'Microsoft YaHei';
    height: 34px;
    width: 68px;
    background-color: #FEFEFE;
    text-align: center
}

.movies-page ul li:hover {
    background-color: #CCC;
    cursor: pointer
}

使用方法：
我这里的css文件是放在css文件夹下面
里面会用到一个xframe.js文件，就相当于是一个JQuery文件，大家下载之后改为对应的名字就行，然后放在js 文件夹下面
后面就是一个index.html 文件了，基本上将上面需要的依赖包放在同一个文件夹下面就可以运行了。

主要还是前端的一些知识，如果还有其他什么问题的，也欢迎一起交流哈。

向善的灯 · 发表于 2018-10-5 21:20

自己来顶一个，不能就这么沉了！

风二中 · 发表于 2018-10-5 22:08

样式有问题懒得弄

向善的灯 · 发表于 2018-10-6 18:42

风二中发表于 2018-10-5 22:08
样式有问题懒得弄

感谢支持！

向善的灯 · 发表于 2018-10-12 19:51

都没人来支持一下吗

clovemevv · 发表于 2018-10-14 10:53

做后端的表示只会js

向善的灯 · 发表于 2018-10-14 13:20

clovemevv 发表于 2018-10-14 10:53
做后端的表示只会js

感谢支持,请问你是做node方向的吗？

十二月丶依旧 · 发表于 2018-12-1 17:31

萌新看的一脸蒙圈，，，

qiulve · 发表于 2018-12-3 09:51

还可以继续优化下，努力

as436845345 · 发表于 2019-11-13 19:24

我来学习学习了

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 【分享】使用原生JS实现的一个经典轮播图导航栏效果

免费评分