0 / 0 / 0
Регистрация: 03.08.2015
Сообщений: 1
|
|
1 | |
Очередная загвоздка с автоматической прокруткой слайдера - JavaScript03.08.2015, 14:42. Показов 1053. Ответов 1
Метки нет (Все метки)
День добрый. Не разбираюсь в JavaScript, скачал шаблон HTML со встроенным слайдером. Не могу разобраться и сделать автопрокрутку. Уже перечитал кучу тем на этом форуме, ничего не помогает.
/* * Slideshow jQuery plugin for the front page of "Different" template * author: dm3studio * version: 1.0 */ (function($) { // Slider class function dmSlider(container, options) { // Define default options this.options = $.extend({ speed: 400, autoScrollInterval: 4000, autoScroll: false }, options); delete options; // Define common variables this.current = 0; this.prev = 0; this.container = $(container); this.wait = false; this.autoScrollInterval = null; this.items = this.container.children('ul:first').children(); this.itemsNum = this.items.length; this.stop = false; // Set defaults to all slides for (var i = 0; i < this.itemsNum; ++i) { var slide = this.items.eq(i); var img = slide.find('img:first'); // Hide all slides except the first slide if (i > 0) slide.css({'z-index': '0', display: 'none'}); slide.css({ 'background-image': 'url(' + img.attr('src') + ')', 'height': img.css('height') }); img.remove(); } var that = this; var controlsContainer = this.container.find('.slideshow_controls:first'); var controls = controlsContainer.children('a'); controls.eq(0).bind('click', function(event) { event.preventDefault(); that.changeImage('prev'); }); controls.eq(1).bind('click', function(event) { event.preventDefault(); var a = $(this); if (a.hasClass("start")) { that.startAutoScroll(); a.removeClass("start").addClass("pause"); } else { that.stopAutoScroll(); a.removeClass("pause").addClass("start"); } }); controls.eq(2).bind('click', function(event) { event.preventDefault(); that.changeImage('next'); }); controlsContainer.css('opacity', 0); this.container.hover(function() { that.stop = true; controlsContainer.stop().animate({opacity: 1}, 'fast'); }, function() { that.stop = false; controlsContainer.stop().animate({opacity: 0}, 'fast'); }); // Initialize auto scrolling if (this.options.autoScroll == true) { this.startAutoScroll(); controls.eq(1).removeClass("start").addClass("pause"); } }; dmSlider.prototype.changeImage = function(dir) { if (this.wait == true) return; this.wait = true; this.prev = this.current; // Find the next and prev image if (dir == 'next') { this.current += 1; this.current = (this.current >= this.itemsNum) ? 0 : this.current; } else { this.current -= 1; this.current = (this.current < 0) ? this.itemsNum - 1 : this.current; } this.go(); }; dmSlider.prototype.go = function() { // Hide previous item this.items.eq(this.prev).css({'z-index': 0, display: 'block'}); // Show new item var that = this; this.items.eq(this.current).css({'z-index': 2, 'opacity': 0, display: 'block'}).animate({opacity: 1}, this.options.speed, function() { that.items.eq(that.prev).css({display: 'none'}); that.wait = false; }); }; dmSlider.prototype.startAutoScroll = function() { var that = this; this.autoScrollInterval = setInterval( function() { if (that.stop == false) that.changeImage(that.options.animation, 'next'); }, this.options.autoScrollInterval ); }; dmSlider.prototype.stopAutoScroll = function() { clearInterval(this.autoScrollInterval); }; $.fn.dm3Slideshow = function(options) { this.each(function() { var DmSlider = new dmSlider(this, options); }); }; })(jQuery);
0
|
03.08.2015, 14:42 | |
Ответы с готовыми решениями:
1
Управление прокруткой документа в JavaScript JavaScript слайдера блокирует работу таймера Вёрстка слайдера | Автоматическая прокрутка слайдера Очередная задача |
Ренегат
|
||||||
04.08.2015, 11:02 | 2 | |||||
Сообщение было отмечено 0legK как решение
Решение
такие большие куски кода не удобно читать без подсветки и форматирования
вот более-менее читабельный код
0
|
04.08.2015, 11:02 | |
04.08.2015, 11:02 | |
Помогаю со студенческими работами здесь
2
Подключение к БД (очередная) почемучка очередная Очередная мухарайка Очередная змейка Очередная халява от NXP Очередная сортировка структуры Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |