Fast cycling with jQuery cycle
HTML
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="slideshow-block">
<a href="http://website.com" class="link"></a>
<ul class="slides">
<li><img src="http://fpoimg.com/100x200"/></li>
<li><img src="http://fpoimg.com/200x200"/></li>
<li><img src="http://fpoimg.com/300x200"/></li>
<li><img src="http://fpoimg.com/400x200"/></li>
<li><img src="http://fpoimg.com/500x200"/></li>
</ul>
</div>
CSS
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
.slideshow-block{
position: relative;
width: 200px;
height: 150px;
overflow: hidden;
background: #111 url('img/bg.jpg');
}
a.link{
position:absolute;
height: 150px;
width: 200px;
display: block;
z-index: 10;
background: url('img/logo.png') no-repeat center top;
}
a.link:hover{
background-position: center -150px;
}
.slides{
z-index:0;
visibility:hidden;
}
.slides.active{
visibility:visible;
}
JavaScript
jQuery(function($){
// Cycle plugin
$('.slides').cycle({
fx: 'none',
speed: 1,
timeout: 70
}).cycle("pause");
// Pause & play on hover
$('.slideshow-block').hover(function(){
$(this).find('.slides').addClass('active').cycle('resume');
}, function(){
$(this).find('.slides').removeClass('active').cycle('pause');
});
});