Использую слайдшоу в прикрепленном файле. | Код |
<div class="gallery gallery3">
<ul class="img-holder">
<li><img src="img/pic01.jpg" width="290" height="290" alt="" /></li>
<li> <img src="img/pic02.jpg" width="290" height="290" alt="" /> </li>
<li> <img src="img/pic03.jpg" width="290" height="290" alt="" /> </li>
<li> <img src="img/pic04.jpg" width="290" height="290" alt="" /> </li>
<li> <img src="img/pic05.jpg" width="290" height="290" alt="" /> </li>
</ul>
<ul class="news-list">
<li> <a href="#">Новость №1 длинный текст длинный текст</a><span class="spanhide">текст длинный текст</span> </li>
<li> <a href="#">Новость №2 длинный текст длинный текст</a><span class="spanhide">текст длинный текст</span> </li>
<li> <a href="#">Новость №3 длинный текст длинный текст</a><span class="spanhide">текст длинный текст</span> </li>
<li> <a href="#">Новость №4 длинный текст длинный текст</a><span class="spanhide">текст длинный текст</span> </li>
<li> <a href="#">Новость №5 длинный текст длинный текст</a><span class="spanhide">текст длинный текст</span> </li>
</ul>
</div>
|
Первый список - ротируемые картинки, второй - тект описание этих картинок. Внутри <li> с описанием лежит спан, который нужно показывать при наведении или прокрутке. | Код |
<!--==========================================5 foto======================================-->
img{border:none;}
.gallery {
overflow:hidden;
width:620px;
padding:10px;
}
.gallery .img-holder, .gallery .img-holder-2 {
position:relative;
width:290px;
height:290px;
margin:0px;
padding-top:0px;
padding:0px;
list-style:none;
}
.gallery ul.img-holder, .gallery .img-holder-2 {
height:290px;
}
.gallery3 ul.img-holder, .gallery .img-holder-2 {
float:left;
width:290px;
height:290px;
padding:0px;
}
.gallery ul.img-holder li, .gallery .img-holder-2 li {
position:absolute;
top:0;
left:0;
z-index:0;
}
.gallery div.img-holder img, .gallery .img-holder-2 img {
position:absolute;
top:0;
left:5px;
z-index:0;
}
.gallery .img-holder .active, .gallery .img-holder-2 {
z-index:1;
}
.gallery ul.items, {
margin:0;
padding:0;
list-style:none;
}
.gallery ul.items li {
float:left;
padding:1px;
}
.gallery ul.items li.active {
padding:0;
border:1px solid #F93;
}
.gallery ul.items img {
border:0;
display:block;
}
.news-list, .news-list-2 {
float:left;
padding-left:0px;
padding-top:0px;
margin:0;
list-style:none;
width:300px;
}
.news-list li, .news-list-2 li {
padding: 0px 0 3px;
width:300 px;
border-bottom:solid #666666 1px;
text-align:left;
}
.news-list a, .news-list-2 a{
display:block;
line-height:24px;
padding:0 8px;
background:#fff;
font-size:18px;
color:#003366;
}
.news-list li.active a , .news-list-2 li.activ a{
color:#fff;
background: url(../img/des/5bg.gif) repeat-x;
font-size:24px;
line-height:39px;
width:320px
}
.news-list li.activ{
width:800px;
}
<!--===========================================end 5 foto==============================================-->
|
Вот скрипт, корый нужно объявлять: | Код |
$('.gallery3').slideShow({
slideEl:'.img-holder li',
numElementLink:'ul.news-list a',
duration:600,
autoSlideShow:true,
switchTime:2000
});
|
собственно, как мне сделать так, чтобы когда элемент списка становился активным, спан было видно? Пробовал такой вариант - не работает: | Код |
span.spanhide{
display:none;
font-style: normal;
}
.news-list li.activ span.spanhide{
display:block;
font-style:italic;
|
Спасибо! |
JQuery слайдшоу со скрытым текстом, внутри <li> есть скрытый span 
Дата 28.8.2009, 11:38 (
Загрузка ...
