I have a site with a js slideshow and it changes slides without any transition. I would like to modify as opposed to rewriting it and use jquery to give it some transitions. Complete beginner I'm afraid.

Can anyone help? What steps do I need to take?

MY HTML
<div class="slideshow">
<ul class="slides">
<li><img src="images/focus003a.jpg" alt="" width="220" height="140" /></li>
<li><img src="images/focus004xh.jpg" alt="" /></li>
<li><img src="images/focus005.jpg" alt="" /></li>
<li><img src="images/focus005pe.jpg" alt="" /></li>
<li><img src="images/focus007.jpg" alt="" /></li>
<li><img src="images/focus007pe.jpg" alt="" /></li>
<li><img src="images/focus008.jpg" alt="" /></li>
<li><img src="images/focus008pe.jpg" alt="" /></li>
<li><img src="images/focus009.jpg" alt="" /></li>
</ul>
</div>

MY JAVASCRIPT (from a book I read) It also has a DOMHelp.js which I can provide if necessary.
/*
autoSlides
*/
autoSlides={
// CSS classes
slideClass:'slides',
dynamicSlideClass:'dynslides',
showClass:'show',
slideCounterClass:'slidecounter',

// labels
// play and stop links, you can use any HTML here
playLabel:'Start slideshow',
// playLabel:'<img src="images/buttonGo.png" title="Play slide show" alt="play" />',
stopLabel:'Stop slideshow',
// stopLabel:'<img src="images/buttonStop.png" title="Stop slide show"alt="stop" />',
// Counter text, # will be replaced by the current image count and &#37; by the number of all pictures
counterLabel:'',

// animation delay in milliseconds
delay:2500,

init:function(){
if(!document.getElementById || !document.createTextNode){return;}
var uls=document.getElementsByTagName('ul');
autoSlides.slideLists=new Array();
for(var i=0;i<uls.length;i++){
if(!DOMhelp.cssjs('check',uls[i],autoSlides.slideClass)){continue;}
DOMhelp.cssjs('swap',uls[i],autoSlides.slideClass,autoSlides.dynamicSlideClass);
uls[i].currentSlide=0;
uls[i].showIndex=i;
uls[i].photoCount=uls[i].getElementsByTagName('li').length;
autoSlides.initSlideShow(uls[i]);
autoSlides.slideLists.push(uls[i]);
}
},
initSlideShow:function(o){
var p,temp;
p=document.createElement('p');
DOMhelp.cssjs('add',p,autoSlides.slideCounterClass);
o.parentNode.insertBefore(p,o.nextSibling);
o.play=DOMhelp.createLink('#',' ');
o.play.innerHTML=autoSlides.playLabel;
DOMhelp.addEvent(o.play,'click',autoSlides.playSlide,false);
o.count=document.createElement('span');
temp=autoSlides.counterLabel.replace(/#/,o.currentSlide+1);
temp=temp.replace(/%/,o.getElementsByTagName('li').length);
o.count.appendChild(document.createTextNode(temp));
p.appendChild(o.count);
p.appendChild(o.play);
temp=o.getElementsByTagName('li')[o.currentSlide];
DOMhelp.cssjs('add',temp,autoSlides.showClass);
o.play.onclick=DOMhelp.safariClickFix;
},
playSlide:function(e){
var t=DOMhelp.getTarget(e);
while(t.nodeName.toLowerCase()!='a'
&& t.nodeName.toLowerCase()!='body'){
t=t.parentNode;
}
var parentList=DOMhelp.closestSibling(t.parentNode,-1);
if(!parentList.loop){
var loopCall="autoSlides.showSlide('"+parentList.showIndex+"')";
parentList.loop = window.setInterval(loopCall, autoSlides.delay);
t.innerHTML=autoSlides.stopLabel;
} else {
window.clearInterval(parentList.loop);
parentList.loop=null;
t.innerHTML=autoSlides.playLabel;
}
DOMhelp.cancelClick(e);
},
showSlide:function(showIndex){
var currentShow=autoSlides.slideLists[showIndex];
var count=currentShow.currentSlide;
var photoCount= currentShow.getElementsByTagName('li').length;
var photo= currentShow.getElementsByTagName('li')[count];
DOMhelp.cssjs('remove',photo,autoSlides.showClass);
count++
if(count==photoCount){count=0};
photo= currentShow.getElementsByTagName('li')[count];
DOMhelp.cssjs('add',photo,autoSlides.showClass);
var counterText=currentShow.count.firstChild
counterText.nodeValue=counterText.nodeValue.replace(/\d/,count+1);
currentShow.currentSlide=count;
}
}
DOMhelp.addEvent(window, 'load', autoSlides.init, false);