Красивое слайдшоу

Привлекательное слайдшоу. При наведении на вкладки происходит смена изображений. Но появилось похожее и более функциональное слайдшоу - ссылка.

Разметка HTML

<div id="content">
  <ul class="infoPanel">
    <li> <a href="#url" class="infoLink current"><img alt="" src="images/image1.jpg" style="opacity: 1;"> <span>Ведьмак 2: Убийцы королей</span>
      <p>Игра 2011 года</p>
      </a>
      <div style="display: block;"> <img alt="" src="images/image1.jpg"> </div>
    </li>
    <li> <a href="#url" class="infoLink"><img alt="" src="images/image2.jpg" style="opacity: 0.8;"><span>Dragon Age: Origins</span>
      <p>Игра 2009 года</p>
      </a>
      <div style="display: none;"> <img alt="" src="images/image2.jpg"> </div>
    </li>
    <li> <a href="#url" class="infoLink"><img alt="" src="images/image3.jpg" style="opacity: 0.8;"><span>TES: Skyrim</span>
      <p>11.11.11</p>
      </a>
      <div style="display: none;"> <img alt="" src="images/image3.jpg"> </div>
    </li>
  </ul>
</div>

CSS

Подключаем внутри тегов <head> css файл:

<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" /> 

Его содержимое показано ниже:

#content {
    clear:both;
    position:relative;
    border:1px solid #acacac;
    width:750px;
    margin:25px auto;
}
.infoPanel {
    padding:0;
    margin:0;
    list-style:none;
    width:750px;
    height:270px;
    background:#333;
    position:relative;
    font-family:verdana, sans-serif;
}
.infoPanel li {
    width:271px;
    float:left;
    clear:left;
    height:90px;
    color:#fff;
}
.infoPanel li a.infoLink {
    display:block;
    width:271px;
    height:90px;
    overflow:hidden;
    text-decoration:none;
    border:0;
    color:black;
    font-size:13px;
}
.infoPanel li a.infoLink p {
    color:black;
    font-size:11px;
    display:block;
    width:200px;
    text-decoration:none;
    margin-top:3px;
    padding:0;
}
.infoPanel li a.current {
    background:url(../images/back.png);
    position:absolute;
    z-index:1;
}
.infoPanel li {
    background:url("../images/back2.png") repeat scroll 0 0 transparent;
}
.infoPanel li a.infoLink img {
    display:block;
    width:52px;
    height:50px;
    float:left;
    margin:20px 10px 0 20px;
    border:1px solid #888;
}
.infoPanel li a.infoLink span {
    display:block;
    padding:20px 20px 0 0;
    width:240px;
    font-weight:bold;
}
.infoPanel li a.current span {
    color:white;
    font-weight:bold;
}
.infoPanel li div img {
}
.infoPanel li div {
    position:absolute;
    right:1px;
    bottom:0;
    width:498px;
    height:270px;
    background:#333;
    display:none;
    overflow:hidden;
}
.infoPanel li div a {
    color:#6cf;
    text-decoration:none;
    font-size:13px;
}

javascript

Подключаем внутри тегов <head> jQuery и плагин:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>

Такой вот код находится в файле slideshow.js:

$(document).ready(function() {

$(".infoPanel li a img").fadeTo(1,0.8);

$(".infoPanel li a").eq(0).addClass("current");
$("a.current").next().fadeIn();
$(".infoPanel li a.current img").fadeTo(250,1);

$(".infoLink").mouseover(function() {
    if (this.className.indexOf("current") == -1) {
        $("a.current").next().fadeOut();
        $(".infoPanel li a.current img").fadeTo(1,0.8);
        $("a.current").removeClass("current");
        $(this).addClass("current");
        $("a.current").next().fadeIn();
        $(".infoPanel li a.current img").fadeTo(250,1);
    }
});
});

СКАЧАТЬСкачек: 1864
110,57 Kb
Кто скачал?

ДЕМОПосмотреть
пример