我创建了一个3D旋转旋转木马,目前由“下一个”和“上一个”按钮控制。我想删除按钮并让旋转木马通过计时器自动旋转,就像它每5秒转换到下一个图像一样。
我一直在尝试不同的东西,但我一直在破坏代码。我将在下面粘贴原始的完整代码。谢谢你的帮助。
<!doctype html>
<html lang="en" class=" js csstransforms3d"><head>
<meta charset="utf-8">
<!-- disable zooming -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="carousel.css" media="screen">
<script src="carousel.js"></script>
<script>
var init = function() {
var carousel = document.getElementById('carousel'),
navButtons = document.querySelectorAll('#navigation button'),
panelCount = carousel.children.length,
transformProp = Modernizr.prefixed('transform'),
theta = 0,
onNavButtonClick = function( event ){
var increment = parseInt( event.target.getAttribute('data-increment') );
theta += ( 360 / panelCount ) * increment * -1;
carousel.style[ transformProp ] = 'translateZ( -115px ) rotateX(' + theta + 'deg)';
};
for (var i=0; i < 2; i++) {
navButtons[i].addEventListener( 'click', onNavButtonClick, false);
}
};
window.addEventListener( 'DOMContentLoaded', init, false);
</script>
<body class=" ready">
<section class="container">
<div id="carousel" style="-webkit-transform: translateZ(-115px) rotateX(0deg);">
<figure style="opacity: 1; -webkit-transform: rotateX(0deg) translateZ(115px);">
<img src="image1.png">
</figure>
<figure style="opacity: 1; -webkit-transform: rotateX(120deg) translateZ(115px);">
<img src="image2.png">
</figure>
<figure style="opacity: 1; -webkit-transform: rotateX(240deg) translateZ(115px);">
<img src="image3.png">
</figure>
</div>
</section>
<section id="options">
<p id="navigation">
<button id="previous" data-increment="-1">Previous</button>
<button id="next" data-increment="1">Next</button>
</p>
</section>
<footer>
</footer>
</body>
</html>
答案 0 :(得分:1)
您可以使用JavaScript的setInterval()
在设定的时间后重复调用您的轮播动画功能,而不是让按钮点击触发动画功能。
请注意,点击按钮时,会向该函数传递一个值,该值确定旋转木马旋转的方向。这是通过事件对象event.target.getAttribute('data-increment')
传递的,一旦我们禁用按钮点击事件就无法使用。我假设这个值不再需要了,因为你可能只是让旋转木马向一个方向前进,这样你就可以删除整行并将下一行改为固定的前进:
theta += ( 360 / panelCount ) * -1;
这是删除了按钮代码并添加了setInterval()
行重写的整个脚本块。 onNavButtonClick
已重命名为carouselAdvance
:
<script>
var init = function() {
var carousel = document.getElementById('carousel'),
navButtons = document.querySelectorAll('#navigation button'),
panelCount = carousel.children.length,
transformProp = Modernizr.prefixed('transform'),
theta = 0,
carouselDelay = 5000,
carouselAdvance = function( event ){
theta += ( 360 / panelCount ) * -1;
carousel.style[ transformProp ] = 'translateZ( -115px ) rotateX(' + theta + 'deg)';
},
carouselInterval = setInterval(carouselAdvance, carouselDelay);
};
window.addEventListener( 'DOMContentLoaded', init, false);