我想通过单击箭头导航使每个部分水平滚动?每个部分都有无限的垂直滚动

时间:2017-03-03 06:19:01

标签: javascript jquery html css3

现在,我想通过单击箭头导航使每个部分水平滚动?每个部分都有一个无限的垂直滚动。

1.导航到水平滚动的导航箭头。

<a class="arrow arrow-left" role="button"></a>    

2.启动内容。

<section class="timeline" id="1">infinite content..</section>
<section class="timeline" id="2">infinite content..</section>
<section class="timeline" id="3">infinite content..</section>
<section class="timeline" id="4">infinite content..</section>

<a class="arrow arrow-right" role="button"></a>

.timeline{
    position: relative;
    margin: 30px auto;
    width: 100%;
}
.arrow {
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
}

.arrow-right {
    border-left: 15px solid #000;
    right: 0;
}
.arrow-left {
    border-right: 15px solid #000; 
    left: 0;
}

1 个答案:

答案 0 :(得分:0)

查看Jquery Animate()功能。

在这里,您可以定义时间轴部分,根据点击的箭头左右滚动