ГА
Сообщений 1 страница 2 из 2
Поделиться22015-04-20 17:43:32
.anonce-table {
background: url("http://sg.uploads.ru/16iVa.png") no-repeat;
height:399px;
width:100%;
clear:both;
}.anonce-table .coll {
float:left;
overflow:hidden;
}
.anon-table-col {
width:220px;
height:339px;
margin:30px 40px;
}
.anon-table-slider {
width:300px;
margin:60px 110px;
height: 339px;
}
.anon-table-simple {
width:200px;
margin:30px -30px;
height: 339px;
}.anonce-table ul li {
list-style:none;
display: inline;
}.anonce-table .tabs li {
opacity:0.6;
}.anonce-table .tabs li:hover {
opacity:0.8;
transition:1s;
}.anonce-table .tabs .active {
opacity:1;
}.anonce-table ul {
padding:0 15px;
margin:0;
}#slider {
height:175px;
overflow: hidden;
position:relative;
}
.sli-links {
margin-left: 40px;
}.sli-links .control-slide {
opacity: 0.8;
background: #8D8F8D;
margin: 0 8px 0 0;
width: 16px;
height: 16px;
border-radius: 8px;
cursor: pointer;
overflow: hidden;
display: block;
float: left;
box-shadow: 0 1px 2px #000;
text-indent:-9999px;
}.sli-links .control-slide:hover, .sli-links .control-slide.active {
background:#464746;
transition:1s;
}
<!--Вкладки и слайдер-->
<script type="text/javascript">
$(document).ready(function() {$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(700);
return false;
});
(function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = false;$(document).ready(function(e) {
$('.slide').css(
{"position" : "absolute",
"top":'0', "left": '0'}).hide().eq(0).show();
var slideNum = 0;
var slideTime;
slideCount = $("#slider .slide").size();
var animSlide = function(arrow){
clearTimeout(slideTime);
$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
if(arrow == "next"){
if(slideNum == (slideCount-1)){slideNum=0;}
else{slideNum++}
}
else if(arrow == "prew")
{
if(slideNum == 0){slideNum=slideCount-1;}
else{slideNum-=1}
}
else{
slideNum = arrow;
}
$('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
$(".control-slide.active").removeClass("active");
$('.control-slide').eq(slideNum).addClass('active');
}var $adderSpan = '';
$('.slide').each(function(index) {
$adderSpan += '<span class = "control-slide">' + index + '</span>';
});
$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
$(".control-slide:first").addClass("active");
$('.control-slide').click(function(){
var goToNum = parseFloat($(this).text());
animSlide(goToNum);
});
var pause = false;
var rotator = function(){
if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
}
$('#slider-wrap').hover(
function(){clearTimeout(slideTime); pause = true;},
function(){pause = false; rotator();
});
rotator();
});
})(jQuery);
});
</script>
<div class="anonce-table">
<div class="anon-table-col coll">
<ul class="tabs">
<li id="tabs1" class="active" ><a href="#tab1"><img src="http://sa.uploads.ru/t/6tcey.jpg" width="35px"></a></li>
<li id="tabs2"><a href="#tab2"><img src="http://sa.uploads.ru/t/zej7b.jpg" width="35px"></a></li>
<li id="tabs3"><a href="#tab3"><img src="http://sa.uploads.ru/t/smaf1.jpg" width="35px"></a></li>
<li id="tabs4"><a href="#tab4"><img src="http://sa.uploads.ru/t/ROtcq.jpg" width="35px"></a></li>
</ul>
<div style="display: block;" id="tab1" class="tab_content">
Контект вкладки 1
</div>
<div style="display: block;" id="tab2" class="tab_content">
Контект вкладки 2
</div>
<div style="display: block;" id="tab3" class="tab_content">
Контект вкладки 3
</div>
<div style="display: block;" id="tab4" class="tab_content">
Контект вкладки 4
</div>
</div>
<div class="anon-table-slider coll">
<div id="slider-wrap">
<div id="slider">
<div class="slide">Контент 1</div>
<div class="slide">Контент 2</div>
<div class="slide">Контент 3</div>
<div class="slide">Контент 4</div>
</div>
</div>
</div>
<div class="anon-table-simple coll">
Текст
</div></div>