0
私はこのカルーセルウィジェットのコードを持っています。下記を参照してください。このJQueryカルーセルの作業をより効率的にする方法はありますか?
問題:問題は、<ul>
の位置が必ずしもそれが想定されている場所に終わらないということです。 Chromeでは、左の位置はleft: -1247px;
となります...ウィジェットが何も表示しないので間違っています。
質問:このウィジェットをより効率的に書く方法はありますか?
//Initiate variable for the rotate() function and delay
var run = setInterval('rotate()', 3800);
//Get the width of the DIV containing the unordered list
var item_width = $('#featured-widget').width();
//Minus 1 instance of the unordered list as it falls outside of #featured-widget
var left_value = -item_width;
//Move the last item before first item, just in case user click prev button
$('#featured-widget li:first').before($('#featured-widget li:last'));
//Set the default item to the correct position
$('#featured-widget ul').css({'left' : left_value});
//Prev button
$('#prev').click(function() {
//Get the right position
var left_indent = parseInt($('#featured-widget ul').css('left')) + item_width;
//Animate the left position of the <ul> and rearrange the list items then reposition the <ul>
$('#featured-widget ul').animate({'left' : left_indent}, 800,function(){
$('#featured-widget li:first').before($('#featured-widget li:last'));
$('#featured-widget ul').css({'left' : left_value});
});
//Cancel the link behavior so page doesn't jump
return false;
});
//Next button
$('#next').click(function() {
var left_indent = parseInt($('#featured-widget ul').css('left')) - item_width;
$('#featured-widget ul ').animate({'left' : left_indent}, 800, function() {
$('#featured-widget li:last').after($('#featured-widget li:first'));
$('#featured-widget ul').css({'left' : left_value});
});
return false;
});
//If mouse hover, pause rotate(), otherwise rotate it
$('#featured-widget, #prev, #next').hover(function() { clearInterval(run);
}, function() { run = setInterval('rotate()', 3800);
});
});
//The rotate() function is called and triggers a click after the setInterval()
//This gets the 'Featured Number Plates' widget to automate
function rotate() { $('#next').click(); }
すべてのヘルプは大歓迎され、感謝
感謝を助けるかもしれない...私は意図的にオンラインからこのコードを選びましたチュートリアルではJQueryの理解を深めることができました。心配しないで...私はすぐに計算を作業すると確信しています:) – Nasir