js rotating image timer
How would I go about adding a timer to this js so images would change automatically after 'x' amount of time. As it stands the change is made via 'a href' with the 'rel' attribute, but that function with the 'rel' is still required.
js:
$(document).ready(function (){
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').css({left:-1476*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
});
html:
<div id="myslide开发者_Python百科">
<div class="cover">
<div class="mystuff">
<img src="images/header_01.jpg" rel="1"></img>
<img src="images/header_02.jpg" rel="1"></img>
<img src="images/header_03.jpg" rel="1"></img>
</div>
</div>
Well, I can't exactly see what you're trying to do, but .delay()
is probably what you're looking for. It modifies the animation queue in jQuery without pausing execution of your code, so you should be able to change other things about the image while the animation has not yet run.
If you're also asking on how to do the rotation (in a way that works with .delay()
), I recommend jquery-animate-css-rotate-scale. Check out the readme for full instructions on how to use it, but for what you want to do, it'd be a matter of including the couple JavaScript files, and then:
$('#image').delay(x).rotate(d);
given x seconds of delay and d degrees. You can do more complicated things, of course.
Edit:
I just realized you may not have meant for it to animate. In that case, you should just use that same author's other patch, jquery-css-transform doing something like this:
$('#image').delay(x).queue(function () {
$('#image').css({transform: 'rotate(165deg)'});
});
This makes the jQuery apply the css transformation like an animation, so it can be delayed, but without actually animating anything.
Also, on the author's personal website, there's an important note if you're relying on jQuery to return transform properties as the six-value transformation matrix. His patches return this to the pre-1.4.3 functionality, to return the transformation string instead (e.g. 'rotate(90deg)'
). This applies to both the animated and non-animated solutions.
Edit 2:
I just saw the comment that you might not want to physically rotate an image, but just periodically switch images. For that, just use the delay example I have above, but substitute an inner function that replaces your image in the way you want instead of the css transform. If this is the case, disregard that jQuery plugin and the limitations I mentioned.
精彩评论