I have been playing about with Snook's code.
I liked it because it was really simple, and my coding skills are very basic.
I have modified the effect and how it is triggered.
The setInterval is triggering off the image rotation,
Then the frwrds div/button is jumping in to trigger the next image.
What I would like to do is, when frwrds button is clicked, I would like the setInterval to pause for a couple of seconds.
Dose anybody have any ideas how do do this a simple as pos?
My code-age:
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();//
$("#frwrds").click(function(){
$('.fadein :first-child').animate({'marginLeft' : "+=550px"},2000, 'easeInBack')
.fadeOut()
.animate({'marginLeft' : "-=550px"})
.next('img')
.fadeIn()
.end()
.appendTo('.fadein')
.trigger('click');
});
});
function auto_trig(){$('#frwrds').trigger('click'); }
$("#frwrds").click(function(){
$('.fadein')
.hide()
.next('img')
.fadeIn();
});
setInterval ( "auto_trig()", 5000 );
</script>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: grey;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-image: url();
background-repeat: repeat;
}
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
#wrapper {
height: 400px;
width: 500px;
margin-right: auto;
margin-left: auto;
overflow:hidden;
}
#bckwrds {
background-color: #FF0;
height: 50px;
width:50px;
margin: auto;
float: left;
}
#frwrds {
background-color: #0FF;
height: 50px;
width:50px;
margin: auto;
float: left;
}
<body>
<div id="wrapper" class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<div id="bttn_wrppr">
<div id="bckwrds"> <<< </div>
<div id="frwrds"> >>></div>
Gracias amigos