-1

我想创建一个类似于我附加的图像的内容滑块。我想知道是否通过使用普通内容滑块并将溢出设置为可见，我将能够显示 3 张幻灯片。但是滑块是否有可能将 slide2 定位在通常可见的区域中？

滑块图片 http://img835.imageshack.us/img835/3994/sliderew.jpg

jsfiddle.net/craigie2204/WMF2N/2

jQuery(document).ready(function($){
// Setup Variables
var slides = $('#slider_mask .slide_container').children();
var total_slides = slides.length; // ***CHANGED***
var slide_width = $('#slider_mask').width();
var current_slide = 0;

// ***REMOVED*** slides.not(':first').hide();
// Set the width of the slide_container to total width of all slides
$('#slider_mask .slide_container').width(slide_width*total_slides);

slides.width(slide_width); // ***ADDED***

// Handle Right Arrow Click
$('#slider_mask .right_button').on('click', function() {

current_slide++;

if(current_slide == total_slides){ current_slide = 0; }

var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-      negative_margin_required+'px'},'fast');


});

// Handle Left Arrow Click
$('#slider_mask .left_button').on('click', function() {

current_slide--;

if(current_slide < 0){ current_slide = total_slides-1; }

var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-    negative_margin_required+'px'},'fast');

});
});
4

2 回答 2

4

根据您的小提琴，无需深入研究代码，您就可以使用它：

var current_slide = 1;
$('#slider_mask .slide_container').css('marginLeft', -current_slide*slide_width+'px');

有了这个，您可以通过设置的初始值从您想要的任何幻灯片开始current_slide。

这是一个演示：

http://jsfiddle.net/bMv6P/

于 2013-03-13T15:17:40.570 回答
3

获得幻灯片宽度后，您可以将其添加到 javascript 中：

    $('#slider_mask .slide_container').css({marginLeft:-slide_width+'px'});

或者只是将css中的边距属性设置为固定的幻灯片宽度。

这是小提琴：http: //jsfiddle.net/WMF2N/3/

于 2013-03-13T15:17:57.443 回答