Question

我正在尝试使用控件制作一个简单的jQuery滑块/轮播。我想在点击左右箭头时滑入或滑出 3个div。我现在不需要自动播放。只是想说我在线尝试了很多插件和教程。我还搜索了stackoverflow的答案，但他们没有解决我的情况。所以......

这是我的 HTML （简化）：

<div class="slider">
<div class="wrap-12">

    <div class="slides">
        <div class="slide name1"><!-- stuff --></div>
        <div class="slide name2"><!-- stuff --></div>
        <div class="slide name3"><!-- stuff --></div>
    </div>

    <div class="controls">
        <div class="left"></div>
        <div class="right"></div>
    </div>

</div>
</div>

CSS ：

.slider .slides {
    width: 1020px;
    white-space: nowrap;
    font-size: 0;
}

.slider .slide {
    width: 1020px;
    display: inline-block;
}

要移至幻灯片2，应用margin-left: -100%的第一个div需要移至需要margin-left: -200%的幻灯片3（仍然是第一张幻灯片）到4 -300% ...

我得到的非常基本的 jQuery 代码：

// slider
// cache the DOM
var $slide = $('.slider .slide').first();
var snum = 1; // wanted to use for slide number

// next
$('.slider .right').click(function(){
  $slide.animate({'margin-left': '-=100%'}, 600, function(){
    // function after clicked right arrow, doesn't have to be here if there is a simple way of doing it :P
  });
});

// prev
$('.slider .left').click(function(){
  $slide.animate({'margin-left': '+=100%'}, 600, function(){
    // function after clicked left arrow
  });
});

所有这一切都是当我点击左箭头时它滑动到滑动2,3 ...当我点击左边时它会返回一张幻灯片。当我点击最后一张幻灯片时，它不会停止。我还希望此代码提供活动幻灯片（我们正在滑动的那个）active-in类，上一张幻灯片：out类。活跃的幻灯片也需要通过它的第二个类ex。 name3类到正文标记<body class="name3">。在jQuery访问之后，它应该如下所示：

<body class="name3">
    <!-- (...) -->
    <div class="slide name1"></div>
    <div class="slide name2 out"></div>
    <div class="slide name3 active-in"></div>

我希望用jQuery做或不太难做。当然，你不需要使用我的jQuery代码作为基础，如果有一个更简单的＆amp;用你的代码做更短的方法。简短的解释会很棒。

Answer 1

我建议使用jQuery Cycle 2.0

将此添加到您想要滑块的位置

<div id=outside>

    <!-- prev/next links -->
    <div class=center>
        <span id=prev>Prev</span>
        <span id=next>Next</span>
    </div>


    <!-- slideshow -->
    <div class="cycle-slideshow" 
        data-cycle-timeout=0 <!-- change this to whatever you want the interval to be for changing slides e.g (4000 = 4s) -->
        data-cycle-prev="#prev"
        data-cycle-next="#next"
        >

        <div class="slide name1"><!-- stuff --></div>
        <div class="slide name2"><!-- stuff --></div>
        <div class="slide name3"><!-- stuff --></div>

    </div>
</div>

在标签附近添加

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://malsup.github.com/jquery.cycle2.js"></script>

Cycle 2.0 Link：

http://jquery.malsup.com/cycle2/demo/

如果您决定使用循环2.0，请注意将此添加到您的css以停止加载时闪烁的图像

.cycle-slideshow div {
   display: none;
}

.cycle-slideshow div.cycle-sentinel{
   display: block;
}

带有左/右箭头的简单jQuery滑块/旋转木马＆amp;无自动播放

1 个答案: