Question

每个人，我需要帮助

我有一个带2个箭头按钮的滑动菜单。当我将鼠标悬停在按钮上时，菜单应向左或向右滑动。但我需要在此菜单内添加差距100px 。例如：我有无限菜单项。在我的菜单转盘中，我只显示8个类似这样的内容...

[ITEM_01] [ITEM_02] [ITEM_03] [ITEM_04] --- 间隙100像素 --- [ITEM_05] [ITEM_06] [ITEM_07] [ITEM_08]

当我将鼠标悬停在右箭头上时，应该像这样开始滑动。.请在两种情况下查看项目4和项目5的位置 ...

[ITEM_02] [ITEM_03] [ITEM_04] [ITEM_05] --- gap-100px --- [ITEM_06] [ITEM_07] [ITEM_08] [ITEM_09]

我为菜单制作了滑动式转盘，但是我无法在幻灯片之间留出空隙。

我的HTML代码：

<section class="wedding-menu-left-outer">
<i class="fas fa-angle-left float-left left-arrow"></i>
    <section class="wedding-menu-left-inner">
        <ul class="main-menu-left first-menu">
            <li><a href="#">first 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
            <li><a href="#">item 8</a></li>
            <li><a href="#">item 9</a></li>
        </ul>
    </section>
<i class="fas fa-angle-right float-right right-arrow"></i>

我的CSS代码：

ul.main-menu-left {
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
    float: left;
    white-space: nowrap;
    overflow: hidden;}
ul.main-menu-left li {
    display: inline-block;
    position: relative;
    background-image: 
    url(../../img/tabs/brqx_tabs_no_selected_war_0100_2017.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0px;}
ul.main-menu-left li a {
    display: inline-block;
    color: #000;
    text-transform: uppercase;
    padding: 12px 12px;
    font-size: .75rem;
    text-decoration: none;}
    section.wedding-menu-left-wrapper {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: auto;}
.wedding-menu-left-outer{
    position: relative;
    width: 100%;}
section.wedding-menu-left-inner {
    float: left;}
.wedding-menu-left-outer i {
    font-size: 25px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;}

我的JQUERY代码：

function makeid() {
var text = ""; var possible="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
let scrollSpeed = 10;
function horizontal_Menu_Width(){
$('.wedding-menu-left-outer').each(function(){
    let id = makeid();
    $(this).attr("id", id);
    //total width of horizontal menu with 2 arrow.
    let horizontalMenuWidth = $(this).width();
    // width of the arrow
    let horizontalMenuArrowWidth = $(this).children('i').outerWidth(true);
    // total-width - 2 arrow-width = menu-container width;
    let mainContainerWidth = horizontalMenuWidth - (horizontalMenuArrowWidth*2);
    $(this).children('.wedding-menu-left-inner').css('width', mainContainerWidth);  
});
}

horizontal_Menu_Width();

$('.wedding-menu-left-outer > i').on('mouseenter', function(){
// init class,ID on valiable when mouse inter
let horizontalMenuParentID = $(this).parent('.wedding-menu-left-outer')[0].id;
let leftArrow = $(this).hasClass('left-arrow');
let rightArrow = $(this).hasClass('right-arrow');
// need to find total width of "menu-inner-container" class
let horizontalMenuScrollableWidth = $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left")[0].scrollWidth;
//need to find out visible width of "menu-inner-container" class
let menuInnerContainerWidth = $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").width();
//this is the value of total scrolable area of horizontal menu
let horizontalMenuScroll = horizontalMenuScrollableWidth - menuInnerContainerWidth;
//now we need to make a scroll left of "total scrolable area"
let scrollableMenu = horizontalMenuScroll - $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").scrollLeft();

// when mouse inter in right-arrow
if(rightArrow){
    $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").animate({
        scrollLeft: horizontalMenuScroll
    },scrollSpeed*scrollableMenu);
} else if(leftArrow){
    $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").animate({
        scrollLeft: 0
    },scrollSpeed * $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").scrollLeft());
}
});

$('.wedding-menu-left-outer > i').on('mouseleave', function(){
let horizontalMenuParentID = $(this).parent('.wedding-menu-left-outer')[0].id;
$("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").stop();
});

我想使结果像这张图一样。

但是我已经像这张图片一样了...

Answer 1

添加此CSS并尝试。

.wedding-menu-left-outer li:nth-child(4n){
    margin-right:40px;
 }

Fiddle link

Answer 2

如果您确定li标签元素的数量只有8个，我建议您使用Css nth选择器。我刚刚在您的li元素中添加了一个类，如codePen所示。

    .liTag:nth-child(4){ 
          margin-right:100px; 
      }

      .liTag:nth-child(5){ 
       margin-left: 100px; 
     }

https://codepen.io/sujilnt/full/QYwRNm下方的工作演示

我如何在单个滑动菜单之间留出空隙

2 个答案: