Kredov long

Автоматическая прокрутка вкладок на jQuery

Тема в разделе "JavaScript", создана пользователем marsrip, 28 мар 2013.

  1. marsrip

    marsrip

    Регистрация:
    13 мар 2013
    Сообщения:
    116
    Симпатии:
    55
    [​IMG]

    Скрипт автоматически смещает вкладки, так же есть возможность прокрутить вкладки кликнув по навигации. Скрипт достаточно сложный в модификации. HTML код - SEO-дружелюбный, вкладки создавать легко так же как и править стили вкладок.

    HTML код:

    Код:
     <div id="slideshow">
    			<div class="slides">
    				<ul>
    					<li id="slide-one">
    						<h2>Заголовок №1</h2>
    						<p>Текст</p>
    					</li>
    					<li id="slide-two">
    						<h2>Заголовок №2</h2>
    						<p>Текст</p>
    					</li>
    					<li id="slide-three">
    						<h2>Заголовок №3</h2>
    						<p>Текст</p>
    					</li>
    				</ul>
    			</div>
    			<ul class="slides-nav">
    				<li class="on"><a href="#slide-one">Вкладка 1</a></li>
    				<li><a href="#slide-two">Вкладка 2</a></li>
    				<li><a href="#slide-three">Вкладка 3</a></li>
    			</ul>
    		</div>
    Скрипт так же использует jQuery плагинг Cycle, который интегрируется:

    Код:
    <script type="text/javascript" src="js/jquery.cycle.js"></script>
    jQuery код скрипта:

    Код:
    $slideshow = {
    	context: false,
    	tabs: false,
    	timeout: 1000,	  // Задержка перед сменой слайда
    	slideSpeed: 1000,  // Время смены слайда
    	tabSpeed: 300,	  // Скорость переключения по вкладкам
    	fx: 'scrollLeft',  // Функция направления
     
    	init: function() {
    		this.context = $('#slideshow');
    		this.tabs = $('ul.slides-nav li', this.context);
    		this.tabs.remove();
    		this.prepareSlideshow();
    	},
     
    	prepareSlideshow: function() {
    		$('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 $slideshow.tabs.eq(i);
    	},
     
    	activateTab: function(currentSlide, nextSlide) {
    		var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
    		if(activeTab.length) {
    			$slideshow.tabs.removeClass('on');
    			activeTab.parent().addClass('on');
    		}		   
    	}		   
    };
    $(function() {
    	$('body').addClass('js');
    	$slideshow.init();
    });