Стильное слайдшоу
Очередное слайдшоу с возможностью, как автоматического, так и ручного пролистывания слайдов.
Подключаем в <head> файлы:
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="js/desSlideshow.js"></script>HTML
<div id="desSlideshow1" class="desSlideshow">
<div class="switchBigPic">
<div>
<a title="" href="#"><img class="pic" src="./images/1.jpg" /></a>
<p><strong>The Gothic 2</strong><br/>Ночь Ворона</p>
</div>
<div>
<a title="" href="#"><img class="pic" src="./images/2.jpg" /></a>
</div>
<div>
<a title="" href="#"><img class="pic" src="./images/3.jpg" /></a>
<p><strong>The Gothic 2</strong><br/>Ночь Ворона</p>
</div>
<div>
<a title="" href="#"><img class="pic" src="./images/4.jpg" /></a>
<p><strong>The Gothic 2</strong><br/>Ночь Ворона</p>
</div>
</div>
<ul class="nav">
<li><a href="#">Скриншот 1</a></li>
<li><a href="#">Скриншот 2</a></li>
<li><a href="#">Скриншот 3</a></li>
<li><a href="#">Скриншот 4</a></li>
</ul>
</div>JS
И добавляем в хедер код запуска:
$(function() {
$("#desSlideshow1").desSlideshow({
autoplay: 'enable',//опция:enable,disable
slideshow_width: '800',//slideshow window width
slideshow_height: '249',//slideshow window height
thumbnail_width: '200',//thumbnail width
time_Interval: '4000',//Milliseconds
directory: 'images/'// flash-on.gif and flashtext-bg.jpg directory
});
$("#desSlideshow2").desSlideshow({
autoplay: 'disable',//option:enable,disable
slideshow_width: '600',//slideshow window width
slideshow_height: '249',//slideshow window height
thumbnail_width: '120',//thumbnail width
time_Interval: '4000',//Milliseconds
directory: 'images/'// flash-on.gif and flashtext-bg.jpg directory
});
});Ссылки
