Jquery滑块自动启动功能
jquery slider auto start function
我的网站上有一个图片滑块
通过点击预览和下一步按钮来滑动图像。
我的问题是:是否可以添加自动启动而不是onclick ?
下面是我的代码:
$(文档)时函数(){var currentPosition = 0;var slideWidth = 560;Var slides = $('.slide');var numberOfSlides =幻灯片长度;
// 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">Clicking moves left</span>') .append('<span class="control" id="rightControl">Clicking moves right</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>
您可以将点击中的功能分离为不同的函数,然后隔一段时间调用它。这个jsfiddle显示了一个简单的示例。
var rotation = 90;
function doAnim()
{
var rotationString = 'rotateY(' + rotation + 'deg)'
$('#slideOne').css('webkit-transform',rotationString);
$('#slideTwo').css('webkit-transform',rotationString);
$('#slideOne').css('transform',rotationString);
$('#slideTwo').css('transform',rotationString);
rotation += 90;
}
$(function(){
setInterval(doAnim,1000);
});
如果您使用的是jquery 1.7+,那么您可能需要考虑将bind
事件更改为on
。参考on
文档
从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法。
如melc所述。您可以简单地使用计时器来实现自动启动或幻灯片效果。下面的代码对您来说是一个很好的起点,但是您可能想要稍微更新一下,以添加停止/启动功能,返回开始…
$(document).ready(function(){
//auto start after 3 seconds
setTimeout(function(){
$('.control').click();
},3000);
//slideshow - every 3 seconds
var slider = setInterval(function(){
$('.control').click();
},3000);
});
希望能有所帮助
相关文章:
- 如何防止网页加载后自动启动功能
- JQuery使用相同的功能自动完成各种输入文本
- 如何用低音量自动启动Youtube视频(iframe)
- 如何使用Javascript自动启动Skype
- 如何自动启动javascript并让它等待输入
- 拖放功能自动更改值
- 自动完成功能未启动
- JWPlayer自动启动并重复动态播放列表
- 在 Web 视图上自动启动 html5 视频,在 Android 4.2.2 上不起作用
- 当您滚动到特定页面位置时,如何执行此操作,该功能将启动一次
- JavaScript - 自动启动方法
- Flash 视频播放器自动启动和控制按钮
- 如何自动启动 JavaScript 倒数计时器
- 如何设置自动启动明亮视频
- 在 HTML5 中自动启动语音转文本
- 功能重新启动工作不正确
- 如何从asp.net代码中自动启动组合键Ctrl P
- 重新启动时自动启动应用程序
- Twitter引导程序转盘不会自动启动
- Jquery滑块自动启动功能