Question

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

slider image 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');

});
});

Answer 1

根据你的小提琴，并且没有深入到代码中你可以使用它：

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

使用此功能，您可以通过设置current_slide的初始值来开始您想要的任何幻灯片。

这是一个演示：

http://jsfiddle.net/bMv6P/

Answer 2

您可以在获得slidewidth后将其添加到javascript中：

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

或者只是将css中的margin属性设置为固定的slidewidth。

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

Jquery Slider从第二张幻灯片开始

2 个答案: