php
defined('_JEXEC') or die('Restricted access');
?>
<div id="slidenews">
<script type="text/javascript">
function click_news(item)
{
var div = document.getElementById('slidenews');
var nod = div.GetElimentByTagName('ul');
for(var i = 0; i < nod.lenght; i++)
{
var child = nod[i].childNodes;
for(var n = 0; n < child.lenght; n++)
if(nod[i].getAttribute('class') == 'slide-tabs')
child[n].setAttribute('class', 'slide-tab');
else
child[n].setAttribute('style', 'display: none;');
if(nod[i].getAttribute('class') == 'slide-tabs')
child[Number(item)].setAttribute('class','slide-tab current');
else
child[Number(item)].setAttribute('style', 'display: list-item;');
}
}
</script>
<div class="slides">
<ul class="slide-tabs">
<?php
$flag = true;
foreach ($list as $key => $item)
{
echo('<li>');
if($flag)
{
echo("<a class="slide-tab current" onclick="click_news($key)" href="#">");
$flag = false;
}
else
echo("<a class="slide-tab" onclick="click_news($key)" href="#">");
echo('<span class="slide-image">');
echo("<img width="87" height="73" alt="$item->title_alt" src="$item->imagesource">");
echo('</span>');
echo("<span class="slide-date">$item->date</span>");
echo("<span class="slide-title">$item->title</span>");
echo('</a>');
echo('</li>');
}
?>
</ul>
</div>
<div class="slide">
<ul class="slide-news">
<?php
$flag = true;
foreach ($list as $item)
{
if($flag)
{
echo('<li class="none" style="display: list-item;">');
$flag = false;
}
else
{
echo('<li class="none" style="display: none;">');
}
echo("<img width="434" height="273" alt="$item->title_alt" src="$item->imagesource">");
echo("<a href="$item->link">");
echo("<span class="slide-newsinfo"><span class="slide-datecat"><span class="slide-date">$item->date</span>");
echo("<span class="slide-cat">$item->cattitle</span></span>");
echo("<strong>$item->introtext</strong>");
echo('</span></a></li>');
}
?>
</ul>
</div>
</div>
css
#slidenews {
background: none repeat scroll 0 0 #F5F6F8;
border: 1px solid #EDEEF0;
height: 292px;
margin: 0 0 18px;
overflow: hidden;
position: relative;
width: 704px;
}
#slidenews ul.slide-tabs, #slidenews ul.slide-news {
overflow: hidden;
position: absolute;
top: 0;
}
#slidenews ul.slide-tabs {
height: 273px;
right: 0;
top: 11px;
width: 281px;
z-index: 2;
}
#slidenews ul.slide-tabs li {
display: block;
height: 91px;
overflow: hidden;
position: relative;
}
#slidenews ul.slide-tabs li a.slide-tab {
display: block;
line-height: normal;
padding: 4px 6px 4px 24px;
text-decoration: none;
}
#slidenews ul.slide-tabs li a.slide-tab .slide-image {
background: url("http://city-adm.lviv.ua/templates/lmrv3/images/b60.png") repeat scroll 0 0 transparent;
float: left;
margin: 0 8px 0 0;
padding: 3px;
}
#slidenews ul.slide-tabs li a.slide-tab img {
border: 1px solid #FFFFFF;
}
#slidenews ul.slide-tabs li .slide-date {
display: block;
font-weight: bold;
}
#slidenews ul.slide-tabs li .slide-title {
-moz-hyphens: auto;
display: inline-block;
float: left;
height: 65px;
overflow: hidden;
width: 58%;
}
#slidenews ul.slide-tabs li a.current {
background: url("http://city-adm.lviv.ua/templates/lmrv3/images/sprt.png") no-repeat scroll right 0 transparent;
color: #FFFFFF;
cursor: default;
display: block;
height: 91px;
overflow: hidden;
}
#slidenews ul.slide-news, #slidenews ul.slide-news li {
height: 283px;
position: relative;
width: 442px;
}
#slidenews ul.slide-news li {
height: 273px;
left: 11px;
position: absolute;
top: 11px;
width: 434px;
}
#slidenews ul.slide-news li a {
bottom: 0;
color: #FFFFFF;
display: block;
height: 273px;
left: 0;
position: absolute;
text-decoration: none;
width: 434px;
z-index: 1;
}
#slidenews ul.slide-news .slide-newsinfo {
background: url("http://city-adm.lviv.ua/templates/lmrv3/images/b60.png") repeat scroll 0 0 transparent;
bottom: 12px;
display: inline;
left: 0;
margin-right: 14px;
padding: 40px 14px 12px 12px;
position: absolute;
}
#slidenews ul.slide-news .slide-datecat {
display: block;
font-size: 12px;
margin: -38px 0 0 -23px;
}
#slidenews ul.slide-news .slide-date {
background: none repeat scroll 0 0 #276CD5;
padding: 4px 4px 4px 11px;
}
#slidenews ul.slide-news .slide-cat {
background: none repeat scroll 0 0 #FFD735;
color: #D50303;
padding: 4px 5px;
}
#slidenews ul.slide-news strong {
display: block;
font-size: 18px;
font-weight: normal;
line-height: 22px;
margin-top: 10px;
}
знатоки JS помогите с переключением 🙂