Красивое слайдшоу
Привлекательное слайдшоу. При наведении на вкладки происходит смена изображений. Но появилось похожее и более функциональное слайдшоу - ссылка.
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;
}JS
Подключаем внутри тегов <head> jQuery и плагин:
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/jаvascript" 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);
}
});
});Ссылки
