Главная » Файлы » Прочие скрипты » jQuery

Слайдер на jQuery для uCoz
24.06.14, 09:16:15

Скачать файл




Очередной не обычный слайдер , решил с вами поделиться smile

Смотрим ДЕМО

Установка

Вставляем в head /head
Код
<link rel="stylesheet" href="http://www.elegantthemes.com/preview/13Floor/wp-content/themes/13Floor/style.css" type="text/css" media="screen" />


Вставляем в body /body
Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>  

<script type="text/javascript" src="http://www.elegantthemes.com/preview/13Floor/wp-content/themes/13Floor/js/superfish.js"></script>  

<script type="text/javascript" src="http://www.elegantthemes.com/preview/13Floor/wp-content/themes/13Floor/js/jquery.backgroundPosition.js"></script>  

<script type="text/javascript">  

//<![CDATA[  

jQuery.noConflict();  

var $featured_area = jQuery('#featured-area'),  

$featured_content = jQuery('#feat-content');  

et_top_menu();  

et_search_bar()  

et_footer_improvements('#footer .widget');  

if ($featured_content.length) {  

var widthButtonsBg,  

controlTabString = 'a.control_tab',  

$controlTab = jQuery(controlTabString),  

$slider_control = jQuery('div#controls'),  

$slider_control_tab = jQuery('div#controls '+controlTabString),  

$slider_arrows = jQuery('#featured-area a#prevlink, #featured-area a#nextlink');  

<!-- buttons background -->

if ($controlTab.length === 2) widthButtonsBg = 434;  

if ($controlTab.length === 1) widthButtonsBg = 220;

if (widthButtonsBg) jQuery('#control-bg').css('width',widthButtonsBg+'px');  

function isIE6() { return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)) }

if (($featured_content.hasClass("custom_animation")) && (!isIE6()))  

et_custom_featured();  

else

et_cycle_integration();

};  

<!---- Top Menu Improvements ---->  

function et_top_menu(){  

jQuery('ul.superfish').superfish({

delay: 200, // one second delay on mouseout

animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation

speed: 'fast', // faster animation speed

autoArrows: true, // disable generation of arrow mark-up

dropShadows: false // disable drop shadows

});  

jQuery('ul.nav > li > a').hover(function(){  

jQuery(this).stop().animate({paddingTop: "14px"},300,function(){  

jQuery(this).addClass("top_arrow");  

})  

},function(){  

jQuery(this).stop().removeClass("top_arrow").animate({paddingTop: "25px"},300);  

});  

var $current_page_cat = jQuery('ul.nav > li.current_page_item, ul.nav > li.current-cat');  

if ($current_page_cat.length) {  

//shows the current page,category arrow  

var currentLeft = $current_page_cat.position().left,  

currentWidth = $current_page_cat.width();  

if ($featured_area.length) currentLeft = currentLeft + 25;  

var currentSpan = '<span class="current_arrow" style="left: ' + currentLeft + 'px; width: '+ currentWidth +'px;"></span>';  

if ($featured_area.length) $featured_area.append(currentSpan)  

else jQuery("#content-top").append(currentSpan);  

};  

};

<!---- Top Menu Improvements ---->  

function et_footer_improvements($selector){  

var $footer_widget = jQuery($selector);  

if (!($footer_widget.length == 0)) {  

$footer_widget.each(function (index, domEle) {  

if ((index+1)%3 == 0) jQuery(domEle).addClass("last").after("<div class='clear'></div>");  

});  

};  

};  

<!---- Search Bar Improvements ---->  

function et_search_bar(){  

var $searchform = jQuery('#header div#search-form'),  

$searchinput = $searchform.find("input#searchinput"),  

searchvalue = $searchinput.val();  

$searchinput.focus(function(){  

if (jQuery(this).val() === searchvalue) jQuery(this).val("");  

}).blur(function(){  

if (jQuery(this).val() === "") jQuery(this).val(searchvalue);  

});  

};  

<!---- Featured Slider Cycle Integration ---->  

function et_cycle_integration(){  

$featured_content.cycle({  

timeout: 0,  

speed: 300,  

cleartypeNoBg: true  

});  

var ordernum;  

var pause_scroll = false;  

function gonext(this_element){

$slider_control.children(controlTabString+".active").removeClass('active');  

var activeLeft = this_element.position().left+8;  

$slider_control.animate({backgroundPosition: activeLeft+'px 7px'},500,function(){  

this_element.addClass('active');  

});  

ordernum = this_element.prevAll(controlTabString).length+1;  

$featured_content.cycle(ordernum - 1);  

}

$slider_control_tab.click(function() {  

clearInterval(interval);  

gonext(jQuery(this));  

return false;  

});  

$slider_arrows.click(function() {  

clearInterval(interval);  

if (jQuery(this).attr("id") === 'nextlink') {  

auto_number = $slider_control.children(controlTabString+".active").prevAll(controlTabString).length+1;  

if (auto_number === $slider_control_tab.length) auto_number = 0;  

} else {  

auto_number = $slider_control.children(controlTabString+".active").prevAll(controlTabString).length-1;

if (auto_number === -1) auto_number = $slider_control_tab.length-1;  

};  

gonext($slider_control_tab.eq(auto_number));  

return false;  

});  

var auto_number;  

var interval;  

$slider_control_tab.bind('autonext', function autonext(){  

if (!pause_scroll) gonext(jQuery(this));

return false;  

});  

interval = setInterval(function() {  

auto_number = $slider_control.children(controlTabString+".active").prevAll(controlTabString).length+1;  

if (auto_number === $slider_control_tab.length) auto_number = 0;  

$slider_control_tab.eq(auto_number).trigger('autonext');  

}, 7000);  

};  

<!---- Custom Featured Slider Animation ---->  

function et_custom_featured(){  

var $slide = $featured_area.find('div.slide');  

var isAnimation = false;  

var ordernum;  

var pause_scroll = false;  

$slide.css('display','none').filter(':first').css({'display':'block'});  

$slider_control_tab.click(function() {  

clearTimeout(interval);  

if (!isAnimation) gonext(jQuery(this));  

return false;  

});  

function gonext(next_element){  

isAnimation = true;  

var $current_tab = $slider_control.children(controlTabString+".active"),  

ordernumCurrent = $current_tab.prevAll(controlTabString).length+1,  

ordernumNext = next_element.prevAll(controlTabString).length+1,  

$currentElement = $slide.eq(ordernumCurrent-1),  

$nextElement = $slide.eq(ordernumNext-1),  

sliderSpeed = 300;  

var readmoreButton = "a.readmore",  

featuredImage = "img.featured_image",  

descriptionDiv = "div.description",  

doAnimation;  

doAnimation = true;  

if (ordernumCurrent === ordernumNext) { doAnimation = false; isAnimation = false; };  

if (doAnimation) {  

move_arrow();  

$currentElement.find(readmoreButton).animate({'opacity':'hide'},sliderSpeed,function(){  

$currentElement.find(featuredImage).animate({'opacity':'hide'},sliderSpeed, function(){  

$currentElement.find(descriptionDiv).animate({'opacity':'hide'},sliderSpeed,function(){  

$currentElement.css('display','none');  

$nextElement.children().css('visibility','hidden').end().css('display','block').children(descriptionDiv).children().css({'display':'block','visibility':'hidden'}).end().css('display','block');  

$nextElement.find(readmoreButton).css({'top': '-190px','display': 'block','visibility':'visible','opacity':'0'}).animate({top:0,opacity:1},1200,'easeOutBounce',function(){  

$nextElement.find(featuredImage).parent('a').css({'visibility': 'visible','opacity':'0'}).animate({opacity:1},sliderSpeed, function(){  

$nextElement.find(descriptionDiv).css({'visibility': 'visible','opacity':'1'}).children().filter(':not('+readmoreButton+')').css({'visibility': 'visible','opacity':'0'}).animate({opacity:1},sliderSpeed);  

$currentElement.find(featuredImage).css({'opacity':'1','display':'block'});  

isAnimation = false;  

interval = setTimeout( et_custom_slider_autonext, 7000 );  

});  

});  

});  

});  

});  

};  

function move_arrow(){  

$current_tab.removeClass('active');  

var activeLeft = next_element.position().left+8;  

$slider_control.animate({backgroundPosition: activeLeft+'px 7px'},500,function(){  

next_element.addClass('active');  

});  

};  

};

$slider_arrows.click(function() {  

clearTimeout(interval);  

if (jQuery(this).attr("id") === 'nextlink') {  

auto_number = $slider_control.children(controlTabString+".active").prevAll(controlTabString).length+1;  

if (auto_number === $slider_control_tab.length) auto_number = 0;  

} else {  

auto_number = $slider_control.children(controlTabString+".active").prevAll(controlTabString).length-1;

if (auto_number === -1) auto_number = $slider_control_tab.length-1;  

};  

if (!isAnimation) gonext($slider_control_tab.eq(auto_number));  

return false;  

});  

var auto_number;  

var interval;  

$slider_control_tab.bind('autonext', function autonext(){  

if (!pause_scroll) gonext(jQuery(this));

return false;  

});  

interval = setTimeout( et_custom_slider_autonext, 7000 );  

function et_custom_slider_autonext(){  

auto_number = $slider_control.children(controlTabString+".active").prevAll(controlTabString).length+1;  

if (auto_number === $slider_control_tab.length) auto_number = 0;  

$slider_control_tab.eq(auto_number).trigger('autonext');  

}  

};  

//]]>

</script>


Встваляем после body
Код
<div id="bg1">  

  <div id="bg2" id="home">  

<div id="wrap">  

<div id="header" class="clearfix">  

<div id="featured-area">  

<div id="feat-content" class="clearfix custom_animation">  

<div class="slide">  

<div class="description">  

<h2 class="title"><a href="/" title="fucking animals">Добро сюда пожаловать</a></h2>  

Fusce eros libero, vestibulum non, elementum eu, suscipit eget, leo. Donec consectetuer tincidunt diam. Sed et mauris in ligula feugiat hendrerit. Cras neque purus, mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vulputate metus in ligula. Ut at tellus. Suspendisse potenti. Mauris in orci eget risus condimentum tristique. Vivamus...</p>  

<a href="/" class="readmore"><span>Пишем что хотим</span></a>  

</div>  

<a href="/" title="welcome welcome">  

<img src="/" class='featured_image' alt='Welcome to 13Floor' width='335' height='220' /> </a>  

</div> <!-- end .slide -->  

<div class="slide">  

<div class="description">  

<h2 class="title"><a href="/" title="Permanent Link to Powerful Features">Что вам угодно</a></h2>  

Nulla ornare, nulla et egestas hendrerit, ipsum dui vulputate dolor, et ornare orci erat eleifend pede. Fusce eros libero, vestibulum non, elementum eu, suscipit eget, leo. Donec consectetuer tincidunt diam. Sed et mauris in ligula feugiat hendrerit. Cras neque purus, mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vulputate...</p>  

<a href="/" class="readmore"><span>Изучаем</span></a>  

</div>  

<a href="/" title="Permanent Link to Powerful Features">  

<img src="http://www.elegantthemes.com/preview/13Floor/wp-content/uploads/2008/11/thumb-22.png" class='featured_image' alt='Powerful Features' width='335' height='220' /> </a>  

</div> <!-- end .slide -->  

<div class="slide">  

<div class="description">  

<h2 class="title"><a href="/" title="Permanent Link to Quality Design">какой то дизайн чтоли :)</a></h2>  

Nulla ornare, nulla et egestas hendrerit, ipsum dui vulputate dolor, et ornare orci erat eleifend pede. Fusce eros libero, vestibulum non, elementum eu, suscipit eget, leo. Donec consectetuer tincidunt diam. Sed et mauris in ligula feugiat hendrerit. Cras neque purus, mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vulputate...</p>  

<a href="/" class="readmore"><span>Жмем сюда, определенно</span></a>  

</div>  

<a href="/" title="Permanent Link to Quality Design">  

<img src="http://www.elegantthemes.com/preview/13Floor/wp-content/uploads/2008/11/thumb-3.png" class='featured_image' alt='Quality Design' width='335' height='220' /> </a>  

</div> <!-- end .slide -->  

<div class="slide">  

<div class="description">  

<h2 class="title"><a href="/" title="Permanent Link to Top Notch Support">Тут тебе не место</a></h2>  

Etiam pharetra scelerisque diam. Maecenas varius augue vel urna. Vestibulum erat nisl, fringilla vel, mollis et, aliquam non, elit. Nulla malesuada turpis nec velit. Donec vitae sem a metus dictum molestie. Ut dignissim, odio non porttitor convallis, sapien leo viverra lorem, a consequat mauris erat sit amet dui. Nullam rutrum feugiat massa. Nullam lacinia purus vitae massa. Pellentesque vel tortor eget nulla ullamcorper...</p>  

<a href="/" class="readmore"><span>Это тебе не понадобится</span></a>  

</div>  

<a href="/" title="Permanent Link to Top Notch Support">  

<img src="http://www.elegantthemes.com/preview/13Floor/wp-content/uploads/2010/04/thumb-4.png" class='featured_image' alt='Top Notch Support' width='335' height='220' /> </a>  

</div> <!-- end .slide -->  

</div> <!-- end #feat-content -->  

<div id="control-bg"></div>  

<div id="controls" class="clearfix">  

<a href="" id="prevlink">Prev</a>  

<a href="" id="nextlink">Next</a>  

<a class="control_tab active" href="#">  

<span class="heading">Велкам</span>  

<span class="excerpt">Тут что то написано</span>  

</a>  

<a class="control_tab" href="#">  

<span class="heading">Надпись</span>  

<span class="excerpt">какя то подпись</span>  

</a>  

<a class="control_tab" href="#">  

<span class="heading">дизайн</span>  

<span class="excerpt">мы делаем великолепные дизайна!!!</span>  

</a>  

<a class="control_tab last" href="#">  

<span class="heading">Помощь???</span>  

<span class="excerpt">Не дождетесь :D</span>  

</a>  

</div> <!-- end #controls -->  

</div> <!-- end #featured-area -->  

<div id="copyright" class="clearfix">  

$POWERED_BY$</p>  

</div> <!-- end #copyright -->  

</div> <!-- end #wrap -->


В прикрепленном архиве файлы на случай, если ссылки станут битыми...
Категория: jQuery | Добавил: Apocalypse | Теги: на, слайдер, для, ucoz, JQuery
Просмотров: 415 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: