（急）轮播图切换的同时，选项卡的样式也要切换，如果选项卡的样式不统一可以实现吗？

发布于 2022-09-02 13:03:13 字数 517 浏览 10 评论 0

如题补充：
遇到个需求，要做一个点击选项卡切换轮播图的特效。
一般情况的选项卡轮播都是点击选项卡背景色和字体样式会切换，但这边是有共性的，点击选项卡切换的样式都是统一的，所以只要定义一个class名，去给选中的元素加上就可以了。
但是客户这边选项卡样式提供了图片，并且图片不不一样，这样感觉很难实现。
为了找共性，个人思路觉得是不是用svg技术比较好实现选项卡的样式切换。
设想：
步骤1：先把提供的选项卡图片制作成svg格式
步骤2：@font-face引入字体
步骤3：定义个样式，可以同时设置字体色和背景色
步骤4：用jquery控制点击的元素添加这个设置好的样式。
步骤5：实现效果

素材：

如果不用以上方法，还有别的方法实现这类需求的轮播呢？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初与友歌 2022-09-09 13:03:13

你把每个选项卡看成一个按钮不就完了，点击之后对应到相对应的图片索引，剩下的图片位置的CSS通过JS控制跟着变不就行了么，给你一个demo看看吧，记得自己本地引用下jquery...

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>query焦点轮播图</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        body {
            padding: 20px;
        }

        #container {
            width: 600px;
            height: 400px;
            border: 3px solid #333;
            overflow: hidden;
            position: relative;
        }

        #list {
            width: 4200px;
            height: 400px;
            position: absolute;
            z-index: 1;
        }

        #list img {
            float: left;
        }

        #buttons {
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            left: 250px;
        }

        #buttons span {
            cursor: pointer;
            float: left;
            border: 1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            margin-right: 5px;
        }

        #buttons .on {
            background: orangered;
        }

        .arrow {
            cursor: pointer;
            display: none;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            background-color: RGBA(0, 0, 0, .3);
            color: #fff;
        }

        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }

        #container:hover .arrow {
            display: block;
        }

        #prev {
            left: 20px;
        }

        #next {
            right: 20px;
        }
    </style>
    <script type="text/javascript" src="js/jquery.1.10.2.js"></script>
    <script type="text/javascript">

        $(function () {
            var container = $('#container');
            var list = $('#list');
            var buttons = $('#buttons span');
            var prev = $('#prev');
            var next = $('#next');
            var index = 1;
            var len = 5;
            var interval = 3000;
            var timer;


            function animate(offset) {
                var left = parseInt(list.css('left')) + offset;
                if (offset > 0) {
                    offset = '+=' + offset;
                }
                else {
                    offset = '-=' + Math.abs(offset);
                }
                list.animate({'left': offset}, 300, function () {
                    if (left > -200) {
                        list.css('left', -600 * len);
                    }
                    if (left < (-600 * len)) {
                        list.css('left', -600);
                    }
                });
            }

            function showButton() {
                buttons.eq(index - 1).addClass('on').siblings().removeClass('on');
            }

            function play() {
                timer = setTimeout(function () {
                    next.trigger('click');
                    play();
                }, interval);
            }

            function stop() {
                clearTimeout(timer);
            }

            next.bind('click', function () {
                if (list.is(':animated')) {
                    return;
                }
                if (index == 5) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-600);
                showButton();
            });

            prev.bind('click', function () {
                if (list.is(':animated')) {
                    return;
                }
                if (index == 1) {
                    index = 5;
                }
                else {
                    index -= 1;
                }
                animate(600);
                showButton();
            });

            buttons.each(function () {
                $(this).bind('click', function () {
                    if (list.is(':animated') || $(this).attr('class') == 'on') {
                        return;
                    }
                    var myIndex = parseInt($(this).attr('index'));
                    var offset = -600 * (myIndex - index);

                    animate(offset);
                    index = myIndex;
                    showButton();
                })
            });

            container.hover(stop, play);

            play();

        });
    </script>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>

</body>
</html>

回复收藏 0

若有似无的小暗淡 2022-09-09 13:03:13

其实一个统一的 class 就可以实现，现在已经当你实现了选项卡的切换效果，左边定义切换的样式名为 cur，
每个选项卡可以这样写（其实就是多套一层）

<ul>
    <li class="cur"> <span class="iconfont1"></span> </li>
    <li><span class="iconfont2"></span></li>
    <li><span class="iconfont3"></span></li>
</ul>

然后通过切换的 cur 样式来控制子元素样式 iconfont1、iconfont2、iconfont3 的显示方式就可以了。

回复收藏 0