Лёгенький слайдер,меняем ссылки на картинки и на новости(ссылки на файлы) на свои и всё. Создаём глобальный блок SLIDER,вставляем код В нужное место ставим $GLOBAL_SLIDER$ Code
<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>
|