HTML + jQuery 实现轮播图

最新推荐文章于 2024-02-20 00:03:41 发布

不苒

最新推荐文章于 2024-02-20 00:03:41 发布

阅读量2.7k

点赞数 2

分类专栏： jQuery 随笔文章标签： jquery

本文链接：https://blog.csdn.net/qq_49002903/article/details/109548647

版权

jQuery 随笔专栏收录该内容

5 篇文章 1 订阅

订阅专栏

轮播图案例

思路整理：

一：HTML页面部分

1、首先创建可视窗口添加6张图片，添加CSS样式

2、添加左右切换按钮，设置样式

3、添加图片导航器，设置样式，添加悬停样式

示例代码如下：

    <style>
        .container {
            width: 1226px;
            height: 460px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .img-list {
            width: 7356px;
            height: 460px;
            position: absolute;
            /* 相对于父级移动 */
        }

        .img-list img {
            width: 1226px;
            height: 460px;
            display: block;
            float: left;
        }

        .img-controls {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            overflow: hidden;
        }

        .img-controls #left,
        #right {
            width: 41px;
            height: 69px;
            display: block;
        }

        .img-controls #left {
            background-image: url("../imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: -84px 50%;
        }

        .img-controls #left:hover {
            background-image: url("../imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: 0 50%;
        }

        .img-controls #right {
            background-image: url("../imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: -125px 50%;
            position: absolute;
            right: 0px;
            top: 0%;
        }

        .img-controls #right:hover {
            background-image: url("../imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: -42px 50%;
        }

        .img-direction {
            list-style: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .img-direction li {
            width: 8px;
            height: 8px;
            background-color: rgba(0, 0, 0, 0.4);
            border: 2px solid #fff;
            border-color: rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            margin: 0 5px;
            float: left;
        }

        /* .img-direction li:hover {
            background-color: #f5f5f5;
            border-color: rgba(0, 0, 0, 0.4);
            cursor: pointer;
            /* 设置鼠标样式 
        } */

        #img-direction .active {
            background-color: #f5f5f5;
            border-color: rgba(0, 0, 0, 0.4);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 可视窗口 -->
    <div class="container">
        <div class="img-list">
            <img src="../imgs/1.jpg">
            <img src="../imgs/2.jpg">
            <img src="../imgs/3.jpg">
            <img src="../imgs/4.jpg">
            <img src="../imgs/5.jpg">
            <img src="../imgs/2.jpg">
        </div>
        <!--    左右切换按钮-->
        <div class="img-controls">
            <a href="#" id="left"></a>
            <a href="#" id="right"></a>
        </div>
        <!--    图片导航器-->
        <ul id="img-direction" class="img-direction">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

HTML部分静态效果图：

静态页面轮播图

二、javascript部分

1、实现点击按钮达到左右切换图片的效果。

2、实现图片导航器的切换效果，并绑定上对应的图片。

3、添加切换图片实现淡入淡出效果。

4、实现自动轮播效果。

javascript部分代码如下：

<script>
    var $imgList = $('.img-list'); //获取图片容器元素
    var listLeft = parseInt($imgList.css('left')); //获取图片容器当前的left的属性值
    var $imgs = $('.img-list>img') //获取所有图片
    var imgSum = $imgs.length; //获取所有图片的数量
    const WIDTH = parseInt($('.container').css('width')); //获取可视窗口的宽度
    var $imgDir = $('.img-direction>li'); //获取图片当行器中所有<li>元素
    var index = 0; //表示当前切换图片的索引值
    // 向右切换按钮的逻辑 - 所有图片的容器向左移动
    $('#right').click(function (event) {
        // 为当前动画添加动画
        $($imgs[index]).animate({
            opacity: 0
        }, 200, function () {
            if (index < (imgSum - 1)) {
                // 1、将图片的索引值进行更新
                index++;
                //2、将图片容器当前的left属性值减少1226px
                listLeft -= WIDTH;
            } else {
                // 1、将图片的索引值进行更新为第一章图片
                index = 0;
                // 2、将图片容器当前的left属性值更新为0
                listLeft = 0;
            }
            // 3、将更新后的left属性值重新为图片容器进行设置
            $imgList.css('left', listLeft);
            // 4、根据当前图片的索引值，查找对应的图片导航器
            $($imgDir[index]).addClass('active').siblings('li').removeClass();
        })
        event.preventDefault(); //阻止默认行为
    });
    // 向左切换按钮的逻辑 - 所有图片的容器向右移动
    $('#left').click(function (event) {
        // 为当前图片添加动画
        $($imgs[index]).animate({
            opacity: 0
        }, 200, function () {
            if (index > 0) {
                // 1、将图片的索引值进行更新
                index--;
                //2、将图片容器当前的left属性值增加1226px
                listLeft += WIDTH;
            } else if (index == 0) {
                // 1、将图片的索引值进行更新为第一张图片
                index = imgSum - 1;
                // 2、将图片容器当前的left属性值更新
                listLeft = -index * WIDTH;
            }
            // 3、将更新后的left属性值重新为图片容器进行设置
            $imgList.css('left', listLeft);
            // 4、根据当前图片的索引值，查找对应的图片导航器
            $($imgDir[index]).addClass('active').siblings('li').removeClass();

        })
        event.preventDefault(); //阻止默认行为
    });

    // 图片导航器
    var $imgDir = $('.img-direction>li');
    $imgDir.mouseover(function () {
        // 1、实现图片导航器的切换效果
        $(this).addClass('active').siblings('li').removeClass();
        /* 2、根据当前图片导航器的切换效果
            $.inArray(value,arr)
            * value - 表示在指定数组或集合中查找的数据
            * arr - 表示数组或集合
        */
        index = $.inArray(this, $imgDir);
        listLeft = -index * WIDTH;
        $imgList.css('left', listLeft);
    });
    // 自动轮播效果
    setInterval(function () {
        if (index < (imgSum - 1)) {
            // 1、将图片的索引值进行更新
            index++;
            //2、将图片容器当前的left属性值减少1226px
            listLeft -= WIDTH;
        } else {
            // 1、将图片的索引值进行更新为第一章图片
            index = 0;
            // 2、将图片容器当前的left属性值更新为0
            listLeft = 0;
        }
        // 3、将更新后的left属性值重新为图片容器进行设置
        $imgList.css('left', listLeft);

        // 4、根据当前图片的索引值，查找对应的图片导航器
        $($imgDir[index]).addClass('active').siblings('li').removeClass();
    }, 800);

    /* 
    模拟事件实现自动轮播，但实现效果轮播速度太快
    function mytrigger(){
        $('#right').trigger('click');
        mytrigger();
    }
    mytrigger(); */
</script>

综合效果如下所示：

轮播图

三：遇到的问题

1、setInterval()方法：可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval()方法会不停地调用函数，直到 clearInterval()被调用或窗口被关闭。

2、自动轮播效果与淡入淡出效果有冲突，自动轮播后会改变opacity的值为0。使用时需要注意。

附上一张左右切换按键图：

icon-slides 使用jQuery需要在HTML页面引入此链接，文件才可以运行：
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>

不苒

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML + jQuery 实现轮播图

轮播图案例思路整理：一：HTML页面部分1、首先创建可视窗口添加6张图片，添加CSS样式2、添加左右切换按钮，设置样式3、添加图片导航器，设置样式，添加悬停样式示例代码如下： <style> .container { width: 1226px; height: 460px; position: relative; overflow: hidden;
复制链接

扫一扫