Question

我有三个锚链接需要是滑块的触发器，并且每个锚链接都有它自己的div，它对应于一旦点击了该div的锚链接就应该滑动到屏幕的中心。

我需要它才能正常工作，无论点击哪一个，无论哪个锚点链接被点击，然后将div滑动到中心。

这是我的html for anchor links

<div class="main-slider">


<div class="slider-wrapper">
  <ul>
    <li class="selector">
        <a id="slide-button-1">How Your Grow</a>
    </li>


    <li class="selector">
        <a id="slide-button-2">What You Need</a>

    </li>


    <li class="selector">
        <a id="slide-button-3">Who Needs It</a>

    </li>
  </ul>
</div>

以下是我希望与每个锚链接对应的每张幻灯片的html

  <div class="slider-top">
     <div class="slider-bottom">
        <ul>
            <li>
                <div id="slide-1"></div>
            </li>
            <li>
                <div id="slide2"></div>
            </li>
            <li>
                <div id="slide3"></div>
            </li>
        </ul>
    </div>
</div>

我已经搜遍了所有设置不同触发按钮的解决方案，将相应的div滑动到屏幕中心，我发现的所有内容都是带有'previous'和next'按钮的滑块

提前感谢任何帮助，非常感谢

Answer 1

如果没有像你使用的css和jQuery这样的更多信息很难回答，但是通常我发现通过使它们绝对或相对定位来重新定位div是最容易的，然后一旦你动画了顶部或左边的值有一个进入。从那里你需要靠近屏幕中间的一些数学或估计。检查我的jsfiddle或看看下面的代码。另外我注意到你使用了很多ID＃s我发现在使用jquery时更容易使用更多的.class，因此更容易记住在处理多个移动项目时会发生什么。 http://jsfiddle.net/Holas/5wpjz/

    <div class="main-slider">
   <div class="slider-wrapper">
   <ul>
<li  class="selector1">
 <a href="#">How Your Grow</a>
</li>
 <li class="selector2">
 <a href="#">What You Need</a>
</li>
<li class="selector3">
<a href="#">Who Needs It</a>
</li>
</ul>
</div>

  <div class="slider-top">
 <div class="slider-bottom">
    <ul>
        <li>
            <div class="slide1"></div>
        </li>
        <li>
            <div class="slide2"></div>
        </li>
        <li>
            <div class="slide3"></div>
        </li>
    </ul>
</div>
</div>         

$(".selector1").click(function () {
    $(".slide1").animate({"left": "+40%"}, "slow");
});


 $(".selector2").click(function () {
    $(".slide2").animate({"left": "+40%"}, "slow");
});

$(".selector3").click(function () {
    $(".slide3").animate({"left": "+40%"}, "slow");
});

ul, li , a{
list-style-type: none;
text-decoration: none;
color: black;
}

.slide1 {
    position: absolute;
    top: 150px;
    left: 0px;
    display: block;
    width: 100px;
    height: 40px;
    background: blue;
    margin-bottom: 20px;
}
.slide2 {
    position: absolute;
    top: 200px;
    left: 0px;
    display: block;
    width: 100px;
    height: 40px;
    background: green;
    margin-bottom: 20px;
}
.slide3 {
    position: absolute;
    top: 250px;
    left: 0px;
    display: block;
    width: 100px;
    height: 40px;
    background: red;
    margin-bottom: 20px;
}
.selector {
    cursor: pointer;
}

如何在特定锚链接点击特定div中滑动

1 个答案: