從第二張幻燈片開始的jquery滑塊

-1

我想創建一個類似於我附加的圖片的內容滑塊。我想知道如果通過採用正常的內容滑塊並將溢出設置爲可見，我將能夠顯示3張幻燈片。但滑塊是否可以將slide2放置在通常可見的區域？從第二張幻燈片開始的jquery滑塊

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

}); 
});

來源

2013-03-13 craigie2204

是的，它是可能的。顯示你正在處理的代碼，以便有人可以改進它。 – insertusernamehere 2013-03-13 14:36:17

你使用的是什麼滑塊插件？ – Pete 2013-03-13 14:37:07

所有你問的都可能在jquery中，所以你不需要再想知道，並嘗試這樣做。如果您遇到問題，請向我們顯示您的代碼，我們會盡力幫助您。 – 2013-03-13 14:37:23

根據你的小提琴，並沒有進入代碼深，你可以使用這個：

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

有了這個，您可以通過設置初始值current_slide開始您想要的任何幻燈片。

這裏有一個演示：

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

或只是在CSS margin屬性設置爲固定slidewidth：

http://jsfiddle.net/bMv6P/

來源

2013-03-13 15:17:40 insertusernamehere

的小提琴大也感謝 – craigie2204 2013-03-13 15:20:34

你得到slidewidth後，您可以添加到JavaScript本。

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

來源

2013-03-13 15:17:57

大謝謝 – craigie2204 2013-03-13 15:22:54

不幸的是，這將不僅僅是工作。你也必須將'current_slide'設置爲'1'。在你的小提琴中嘗試。滑動從一開始就不正常。 – insertusernamehere 2013-03-13 15:25:34

@insertusername它在我的jsfiddle中工作...它基本上和你的一樣，但少了一些代碼和操作...因爲我只是調用slide_width，並且不會將它乘以幻燈片編號=） – 2013-03-13 15:35:45

從第二張幻燈片開始的jquery滑塊

回答

相關問題