0 / 0 / 0
Регистрация: 03.08.2015
Сообщений: 1
1

Очередная загвоздка с автоматической прокруткой слайдера - JavaScript

03.08.2015, 14:42. Показов 1060. Ответов 1
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
День добрый. Не разбираюсь в 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
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
03.08.2015, 14:42
Ответы с готовыми решениями:

Управление прокруткой документа в JavaScript
Народ, подскажите как сделать, чтобы содержимое страницы не прокручивалось выше или ниже какой...

JavaScript слайдера блокирует работу таймера
Здравствуйте! Подскажите, такая проблема: вставил на сайт javascript слайдера, после этого перестал...

Вёрстка слайдера | Автоматическая прокрутка слайдера
Здравствуйте! ;) Вот на стадии разработки сайта случилась такая проблема которую не могу решить уже...

Очередная задача
Здравствуйте. Помогите пожалуйста решить задачу вида:

1
Ренегат
Эксперт HTML/CSS
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
04.08.2015, 11:02 2
Лучший ответ Сообщение было отмечено 0legK как решение

Решение

такие большие куски кода не удобно читать без подсветки и форматирования
вот более-менее читабельный код
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/*
 * 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
04.08.2015, 11:02
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
04.08.2015, 11:02
Помогаю со студенческими работами здесь

Подключение к БД (очередная)
Всем привет! Понимаю, что тема уже далеко не первая, но не нашел нормальной инструкции: то...

почемучка очередная
в этот раз в реализованной модели на АТ89$52, записал программу $NOMOD51 $INCLUDE(REG52.INC) ...

Очередная мухарайка
Очередной девайс (предыдущие варианты мухараек выкладывались на старом форуме, но, похоже, канули в...

Очередная змейка
Представляю вашему вниманию очередную змейку найденную на просторах интернетов (а именно вот тут) ...

Очередная халява от NXP
Вот ссылка для регистрации. http://www.nxp.com/campaigns/cortex-m0/ Регищься, присылаешь фотки...

Очередная сортировка структуры
Подобных вопросов были тонны, и тонны еще будут. Есть прога, кривая и написанная собственноручно....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

Новые блоги и статьи
Использование связки C# и PHP в корпоративной разработке и микросервисной архитектуре
InfoMaster 16.01.2025
Введение в интеграцию C# и PHP В современной корпоративной разработке все чаще возникает потребность в создании гибких и масштабируемых решений, способных эффективно решать широкий спектр. . .
Как использовать Kerio дома для управления сетью и пользователями
InfoMaster 16.01.2025
Использование технологий для улучшения повседневной жизни стало неотъемлемой частью современного быта. Одной из таких технологий является Kerio — мощный инструмент для управления сетью и. . .
Есть ли будущее у DVD и Blu-ray?
InfoMaster 16.01.2025
В эпоху стремительного развития цифровых технологий и повсеместного распространения потоковых сервисов вопрос о будущем физических носителей информации становится все более актуальным. Особенно остро. . .
Как проводить научные вычисления на Python
InfoMaster 15.01.2025
Python стал одним из наиболее востребованных языков программирования в области научных вычислений благодаря своей простоте, гибкости и обширной экосистеме специализированных библиотек. Научные. . .
Создание игры типа Minecraft на PyGame/Python: пошаговое руководство
InfoMaster 15.01.2025
В данном руководстве мы рассмотрим процесс создания игры в стиле Minecraft с использованием библиотеки PyGame на языке программирования Python. Этот проект идеально подходит как для начинающих. . .
Как создать свою первую игру в стиле Doom на Unreal Engine
InfoMaster 15.01.2025
Разработка шутера от первого лица в стиле классического Doom представляет собой увлекательное путешествие в мир игрового программирования, где сочетаются творческий подход и технические навыки. . . .
Параллельное программировани­е: основные технологии и принципы
InfoMaster 15.01.2025
Введение в параллельное программирование Параллельное программирование представляет собой фундаментальный подход к разработке программного обеспечения, который позволяет одновременно выполнять. . .
Как написать микросервис на C# с Kafka, MediatR, Redis и GitLab CI/CD
InfoMaster 15.01.2025
В современной разработке программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот подход позволяет разделить сложную систему. . .
Что такое CQRS и как это реализовать на C# с MediatR
InfoMaster 15.01.2025
Концепция CQRS и её роль в современной разработке В современном мире разработки программного обеспечения архитектурные паттерны играют ключевую роль в создании масштабируемых и поддерживаемых. . .
Как настроить CI/CD с Azure DevOps
InfoMaster 15.01.2025
CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .
Как настроить CI/CD с помощью Jenkins
InfoMaster 15.01.2025
Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .
Как написать микросервис на Go/Golang с Kafka, REST и GitHub CI/CD
InfoMaster 14.01.2025
Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru