Jquery滑块从第二个幻灯片开始

Jquery Slider to start from second slide

本文关键字：幻灯片 开始 第二个 Jquery      更新时间：2023-09-26

我想创建一个类似于我所附加的图像的内容滑块。我想知道如果通过采取一个正常的内容滑块和设置溢出可见，我将能够显示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');
});
});

根据您的喜好，无需深入代码，您可以使用以下代码:

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

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

下面是一个示例:

http://jsfiddle.net/bMv6P/

您可以在获得slidewidth:

之后将其添加到javascript中。
    $('#slider_mask .slide_container').css({marginLeft:-slide_width+'px'});

或者直接将CSS中的margin属性设置为固定的slidewidth。

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

相关文章：