Слайдер(кликабельный)

<div align="center"><img src="http://slimyalta.net/Slider/imgrot/NawGames.png" alt="the description of image 2" />

<style type="text/css">  
<!--  
#slideshow {  
  position: relative;  
  padding: 0;  
  list-style: none;  
  width: 620px; /* the width of the container, change if necessary */  
  height: 300px; /* the height of the container, change if necessary */  
}  

#slideshow img {  
  border: none;  
}  

#slideshow .arrow {  
  width: 40px;  
  height: 70px;  
  display: block;  
  position: absolute;  
  top: 28%;  
  text-indent: -9999px;  
  overflow: hidden;  
  cursor: pointer;  
  z-index: 70;  
}  

#slideshow .arrowL {  
  background: url(http://slimyalta.net/Slider/imgrot/slideView_arrows.png) no-repeat 0px 30px;  
  left: 0px;  
  display:block;  
}  

#slideshow .arrowR {  
  background: url(http://slimyalta.net/Slider/imgrot/slideView_arrows.png) -40px 30px no-repeat;  
  right: 0px;  
   
}  
.slideView, .thumbList {  
  margin: 0;  
  padding: 0;  
  list-style: none;  
}  

.slideView {  
  height: auto;  
  position: relative;  
  top: 0;  
  left: 0;  
  overflow: hidden;  
  z-index: 0;  
}  

.slideView li {  
  width: 100%;  
  height: 274px; /* the height of the slideshow, change if necessary */  
  float: left;  
  margin: 0;  
  display: inline;  
}  
.slideView li a {  
  display: block;  
  width: 100%;  
  height: 100%;  
}  

#slideshow .wrap {  
  background: black;  
  position: absolute;  
  height: 75px;  
  bottom: 0;  
  left: 0px;  
  z-index: 90;  
}  

#slideshow .thumbList {  
  position: relative;  
  top: 0;  
  left: 0;  
  overflow: hidden;  
  z-index: 100;  
  width: auto;  
  display:none;  
}  

#slideshow .thumbList li {  
  width: 90px;  
  height: 100%;  
  display: inline;  
  float: left;  
  margin: 0;  
  display:none;  
}  

#slideshow .desc {  
  padding: 0px 20px 0px 16px;  
  width: 620px; /* the width of the desccription, change if necessary */  
  height: 30px;  
  background: white;  
  position: absolute;  
  top: 0px;  
  left: 0px;  
  color: black;  
  z-index: 200;  
  font-weight: bolder;  
  border-bottom: 1px solid Gray;  
  font-size: 12px;  
  line-height: 30px;  
  overflow: hidden;  
  display:none;  

}  
#slideshow .thumbList li a {  
  display: block;  
  width: 64px;  
  height: 47px;  
  margin-left: 9px;  
  margin-top: 9px;  
  border: 2px solid #17d2db;  
}  

#slideshow .thumbList li a:hover {  
  border-color: #f75514;  
}  
-->  
</style>  
<script src="http://slimyalta.net/Slider/js/slideView.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function() {  
  $("#slideshow").slideView();  
});  
</script>  
  <div id="slideshow">  
  <ul class="slideView">  
  <div class="bannertop"><div class="dleft"><div class="dright">
  <div id="bannertop">

  <li><a href="http://slimyalta.net/news/battlefield_bad_company_2_rus_eng_repack_video_obuchenie_fix/2010-03-01-2204"><img src="http://slimyalta.net/Slider/img/2.jpg" alt="the description of image 2" /></a></li>
  <li><a href="ССЫЛКА НА НОВОСТЬ"><img src="ССЫЛКА НА КАРТИНКУ" /></a></li>
  <li><a href="ССЫЛКА НА НОВОСТЬ"><img src="ССЫЛКА НА КАРТИНКУ" /></a></li>
  <li><a href="ССЫЛКА НА НОВОСТЬ"><img src="ССЫЛКА НА КАРТИНКУ" /></a></li>

  </ul>  
</div>
</div>