ПРОСТОЙ СЛАЙДЕР НА JQUERY

В редакторе

ПРОСТОЙ СЛАЙДЕР НА JQUERY

Brain_Script
2014
2016-09-03 17:47:38
<div id="slider-wrap"> <div id="slider"> <div class="slide">Здесь содержание слайда 1</div> <div class="slide">Здесь содержание слайда 2</div> <div class="slide">Здесь содержание слайда 3</div> </div> </div>
#slider-wrap{ /* Оболочка слайдера и кнопок */ width:660px; } #slider{ /* Оболочка слайдера */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative;} .slide{ /* Слайд */ width:100%; height:100%; } .sli-links{ /* Кнопки смены слайдов */ margin-top:10px; text-align:center;} .sli-links .control-slide{ margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat;} .sli-links .control-slide:hover{ cursor:pointer; background-position:center center;} .sli-links .control-slide.active{ background-position:center top;} #prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg.png) left center no-repeat; opacity:0.8; z-index:3; outline:none !important;} #prewbutton{left:10px;} #nextbutton{ right:10px; background:url(arrowBg.png) right center no-repeat;} #prewbutton:hover, #nextbutton:hover{ opacity:1;}
var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(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'); } if(hwNeedLinks){ var $linkArrow = $('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#"></a>') .prependTo('#slider'); $('#nextbutton').click(function(){ animSlide("next"); }) $('#prewbutton').click(function(){ animSlide("prew"); }) } 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(); });
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика