С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 03.08.2015
Сообщений: 1
1

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

03.08.2015, 14:42. Показов 1053. Ответов 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)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
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
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.08.2015, 11:02
Помогаю со студенческими работами здесь

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

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

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru