Помогите разобраться со скриптом слайдшоу
Зашел на один сайт, где видел данный эффект:
Вот ссылка на этот сайт Заинтересовала анимация при смене ссылок. Сначала думал, что на флеше. Потом увидел, что на js и на jquery. В коде разобраться не смог. Что за структура записи? Вот код: $slideshow = { context: false, tabs: true, timeout: 5000, // time before next slide appears (in ms) slideSpeed: 500, // time it takes to slide in each slide (in ms) tabSpeed: 700, // time it takes to slide in each slide (in ms) when clicking through tabs fx: 'fade', // the slide effect to use init: function() { // set the context to help speed up selectors/improve performance this.context = $('#slideshow'); // set tabs to current hard coded navigation items this.tabs = $('ul.slides-nav li', this.context); // remove hard coded navigation items from DOM // because they aren't hooked up to jQuery cycle this.tabs.remove(); // prepare slideshow and jQuery cycle tabs this.prepareSlideshow(); }, prepareSlideshow: function() { // initialise the jquery cycle plugin - // for information on the options set below go to: // [url]http://malsup.com/jquery/cycle/options.html[/url] $('div.slides > ul', $slideshow.context).cycle({ fx: $slideshow.fx, timeout: $slideshow.timeout, speed: $slideshow.slideSpeed, fastOnEvent: $slideshow.tabSpeed, pager: $('ul.slides-nav', $slideshow.context), pagerAnchorBuilder: $slideshow.prepareTabs, before: $slideshow.activateTab, pauseOnPagerHover: true, pause: true }); }, prepareTabs: function(i, slide) { // return markup from hardcoded tabs for use as jQuery cycle tabs // (attaches necessary jQuery cycle events to tabs) return $slideshow.tabs.eq(i); }, activateTab: function(currentSlide, nextSlide) { // get the active tab var activeTab = $('a[href*="#' + nextSlide.id + '"]', $slideshow.context); // if there is an active tab if(activeTab.length) { // remove active styling from all other tabs $slideshow.tabs.removeClass('on'); // add active styling to active button activeTab.parent().addClass('on'); } var nextId = nextSlide.id.replace(/slideItem/gi,""); if(nextId == 0 || nextId == null){ nextId = 1; } } }; $(function() { // add a 'js' class to the body $('body').addClass('js'); // initialise the slideshow when the DOM is ready $slideshow.init(); }); |
Часовой пояс GMT +3, время: 06:00. |