<div id="jQPanelLeft" class="down">  
<div style="height: 100%; width: 350px; overflow-y: hidden; margin-left: -15px;" align="center" id="scrollPanel">  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
<img src="http://megasoft.3dn.ru/images/snowlogo.png" />  
</div>  
</div>

<style type="text/css">      
        #jQPanelLeft {      
         width: 330px;  
height: 100%;  
filter: alpha(opacity=50);      
         opacity: 0.5;      
         background: #555;      
         position: fixed;  
cursor: pointer;  

        }      
</style>

<script type="text/javascript">  
var imagesHeight = '143px', wrapIt = false;  
$(document).ready(function () {  
var p = $('#jQPanelLeft'), w = p.width();  
p.css('marginLeft', -w + 30).click(function () {  
p.toggleClass('down').animate({      
marginLeft: (p.hasClass('down') ? '-=': '+=') + (w - 30),      
opacity: (p.hasClass('down') ? '-=': '+=') + 0.5      
});  
});  
var pan = $('#scrollPanel');  
setInterval(function () {  
pan.animate({scrollTop: pan.scrollTop() < pan.height() ? '+=' + imagesHeight : 0}, 1000);  
}, 1000);  
if (wrapIt) {  
$(pan).find('img').each(function () {  
$(this).wrap('<a href="' + this.src + '"></a>');  
});  
}  
});  
</script>