我有这个jQuery滑块但是,现在我需要让它在开头自动开始滑动。目前只有点击向左或向右滑动才能实现。有人可以帮我怎么做吗?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 960;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Кликни за лево</span>')
.append('<span class="control" id="rightControl">Кликни за десно</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
这是我使用的html:
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<img src="Images/banner/z1.png" alt="Добредојдовте во светот на децата!" />
</div>
<div class="slide">
<img src="Images/banner/z2.png" />
</div>
<div class="slide">
<img src="Images/banner/z3.png"/>
</div>
</div>
</div>
<!-- Slideshow HTML -->
答案 0 :(得分:0)
将滑块放在单独的功能中:
var slideGo = function(elem){
// Determine new position
currentPosition = ($(elem).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
然后从文档就绪处理程序调用该函数,传入对元素的引用:
$(document).ready(function(){
var elem = $('#myelement');
slideGo(elem);
});