小编Ped*_*dro的帖子

我有这个垂直幻灯片可以通过上/下箭头导航.幻灯片放映容器div中有7个项目(div),但一次只能显示其中的3个.实际上,这个幻灯片是一个菜单 - 从可见的3个项目中,中间的一个是可点击的,它将在页面中的其他位置加载内容.

现在,由于有3个项目,只有第2个项目(中间一个)是可点击的,我需要在它们之间创建差异.所以,我想改变项目border/border-radius是这样的:

问题是我不知道如何做到这一点,因为div在可见区域不断变换位置.我真的需要帮助.

HTML标记:

<div id="rocksType_btns">
    <div id="rocksType_btnUp"></div>
    <div id="rocksType_btnDown"></div>
</div>

<div id="rocksType_subtypeSlider">
    <div id="rocksType_DBitems_container">
        <div id="rocksType_DB_1" class="rocksType_DBitem">Item 1</div>
        <div id="rocksType_DB_2" class="rocksType_DBitem">Item 2</div>
        <div id="rocksType_DB_3" class="rocksType_DBitem">Item 3</div>
        <div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div>
        <div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div>
        <div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div>
        <div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div>
    </div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->

我已经为before/current/after状态定义了CSS代码 - 只需要分配它们.

这是一个小提琴.

感谢名单.

佩德罗

是否可以使用带有X子div的容器div,每个div可在浏览器中调整100%？我知道它可以用一个背景来完成,但不能用一行div ...这就是我打算做的事情(左/右滑动的幻灯片):

HTML:

<div id="slideshowContent">
  <div id="slideshowImage_01" class="slideshowImage_container"></div>
  <div id="slideshowImage_02" class="slideshowImage_container"></div>
  <div id="slideshowImage_03" class="slideshowImage_container"></div>
  <div id="slideshowImage_04" class="slideshowImage_container"></div>
</div> <!-- End of id="slideshowContent" -->

......和CSS:

#slideshowContainer {
  z-index: 0;
  width: 11520px; height: 1080px;
  position: relative;
}

.slideshowImage {
  width: 1920px; height: 1080px;
  float: left;
}

感谢名单.

佩德罗

编辑1:我忘了提到每个div包含一个图像.

编辑2:添加了我自己更新的FIDDLE.

我需要帮助解决一些mouseenter/mouseleave问题.这是一个视觉原理图:

所以,有这个垂直按钮滑块.当您单击这些按钮中的任何一个时,会弹出一个"灯箱"div以及一个背景白色div,与滑块容器重叠.如果我再次单击灯箱div,它将关闭,一切都返回到默认状态.问题是按钮的mouseenter/mouseleave事件正在阻碍,导致一些问题.

这是jQuery代码:

function rocksType_mouseEvents_run(){

    // Mouseenter events
    $('.rocksType_DBitems_container').on('mouseenter', '> div:not(.rocksType_highlighted)', function(){
      $(this).stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.2%', 'margin-bottom':'1.2%'}, 300, 'swing')
      .find('p', this).stop().animate({'font-size':'110%', 'color':'rgba(0, 0, 0, 1)'}, 100, 'swing');
    });

    // Mouseleave events
    $('.rocksType_DBitems_container').on('mouseleave', '> div:not(.rocksType_highlighted)', function(){
      $(this).stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.1%'}, 300, 'swing')
      .find('p', this).stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 0.5)'}, 100, 'swing');
    });

    // Click events
    $('.rocksType_DBitems_container').on('click', '> div:not(.rocksType_highlighted)', function(){

      // De-highlight currently rocksType_highlighted item
      function dehighlight_clickedRocksType(){
        $('.rocksType_DBitems_container > div.rocksType_highlighted').removeClass('rocksType_highlighted').stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.2%'}, 300, 'swing')
        .find('p').stop().animate({'font-size':'73%'}, 150, 'swing', …