简单的jQuery滑块/旋转木马的内容与左/右箭头和不自动播放

我试图做一个简单的jQuery滑块/旋转木马的控件。我想要滑入或滑出 3格点击左右箭头时。现在我不需要自动播放。只是想说我在网上尝试了很多插件和教程。我也搜索了stackoverflow的答案，但他们没有解决我的情况。所以......简单的jQuery滑块/旋转木马的内容与左/右箭头和不自动播放

这是我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，第一个div需要margin-left: -100%应用，以移至幻灯片3（仍为第一张幻灯片）需要margin-left: -200%应用，至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 class，previous slide：out class。另外有效的幻灯片需要通过其第二类前。 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代码作为基础。简短的解释会很棒。

来源

2015-04-12 pbe

可能我建议使用jQuery的周期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>

周期2.0连接，附近：

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

在一个侧面说明，如果你决定使用周期2.0添加到您的CSS停止对负载

.cycle-slideshow div { 
    display: none; 
} 

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

来源

2015-04-12 13:09:44

感谢闪烁的图像，但我宁愿不使用插件。 jQuery循环有太多的选择比我需要的。 – pbe

简单的jQuery滑块/旋转木马的内容与左/右箭头和不自动播放

回答

相关问题