Question

我正在尝试创建一个包含两个导航箭头的导航，我需要将它们固定在一个内容div旁边（一个在左边，另一个在右边）

这是一个例子 http://deals.bestbuy.com/#!/midweek+deals

我有这样的主要div

<div id="wrapper">

<div id="leftArrow"></div>
<div id="content"></div>
<dir id="rigthArrow"></dir>

</div>

我希望我的问题足够明确。提前谢谢。

PS：如果你能告诉我如何让固定位置成为某个卷轴上的绝对位置，那就太棒了。

PS2：“抱歉英语不好。”

Answer 1

如果您不想使用插件，可以执行此操作

<强> HTML

<div id="wrapper">
  <div id="leftArrow">Left</div>
  <div id="rightArrow">Right</div>
  <div id="content">
    <div id='1'>Content first</div>
    <div id='2'>Content second</div>
    <div id='3'>Content third</div>
  </div>
</div>

<强> CSS

#wrapper {
   width: 60%;
   margin: 0 auto;
   position: relative;
}
#leftArrow {
    position: fixed;
    top: 13px;
    display: none;
    left: 85.5px;
    cursor: pointer;
    border: 1px solid;
     height: 70px;
    width: 50px;
}
#rightArrow {
    position: fixed;
    top: 13px;
    display: block;
    right: 12.5px;
    left: 525.5px;
    cursor: pointer;
    text-align: right;
    border: 1px solid;
    height: 70px;
    width: 50px;
}
#content {
    position: relative;
    width: 100%;
    height: 500px;
    margin: 0 auto;
    border: 1px solid;
}

<强> JS

$(function () {
 $('#content div').hide();
    $('#content #1').show();
    var index = 1;
    var count = $('#content').children().length;
    $('#rightArrow').click(function () {
        console.log('clicked');
        index++;
        if (index <= count) {
            $('#content div').hide();
            $('#content #' + index).show();
            $('#leftArrow').show();
        } else if (index > count) {
            index = count;
        }
    });
    $('#leftArrow').click(function () {
        index--;
        if (index > 0 && index <= count) {
            $('#content div').hide();
            $('#content #' + index).show();
        } else if (index < 1) {
            index = 1;
            $('#rightArrow').hide();
        }
    });
});

检查http://jsfiddle.net/raunakkathuria/WD67g/3//

如果你想使用插件，你可以搜索jquery幻灯片，几个例子

http://www.slidesjs.com/

http://wowslider.com/rq/support-jquery-navigation-slider-1c.html

jQuery检测页面宽度并应用左和右;正确的价值

1 个答案: