Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 31.07.2015
Сообщений: 4
1

Убрать автоматическую смену слайдов в карусели jQuery

31.07.2015, 22:25. Просмотров 529. Ответов 4
Метки нет (Все метки)

Никак не могу понять что менять. Необходимо убрать автоматическую смену слайдов. Сделать так, чтобы они менялись только при клике. Подскажите, пожалуйста.


ИНЛАЙНОВЫЙ JS в <head>:
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
    <script type="text/javascript">
    
var setOpacity = function(curr, last, el_curr, el_last, elements) {
  if (last !== null) {
    $($('li', '#thumbs')[last]).animate({opacity: .6});
  }
  $($('li', '#thumbs')[curr]).animate({opacity: 1});
}
 
var bindThumbnails = function() {
  $('a', '#thumbs').each(function() {
    $(this).unbind();
    $(this).click(function() {
      var i = $($(this).parents('li').get(0)).attr('id').substring(6);
      $('#photos').xfadeTo($('#photo-' + i));
      return false;
    });
  });
}
 
$(document).ready(function() {
  $('#photos').xfade({height: 420, onBefore: setOpacity});
 
  bindThumbnails();
 
  $('#append-item').click(function() {
    var id = $('#thumbs').children().length + 1;
    var thumb = '<li id="thumb-' + id + '"><a href="#t">' + $('.thumb', '#append').html() + '</a></li>';
    $(thumb).appendTo('#thumbs');
 
    var photos = '<li id="photo-' + id + '"><a href="#p">' + $('.photo', '#append').html() + '</a></li>';
    $(photos).appendTo('#photos');
    $('#photos').xfadeRefresh();
 
    bindThumbnails();
  });
 
  $('#remove-item').click(function() {
    $('#thumbs').children().last().remove();
    $('#photos').children().last().remove();
    $('#photos').xfadeRefresh();
  });
});
    </script>


ПОДКЛЮЧЕННЫЙ КОД:
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
/*
 * jQuery xFade 1.0
 * [url]http://labs.firmanw.com/jquery-xfade[/url]
 *
 * Copyright (c) 2011 Firman Wandayandi
 * Dual licensed under the MIT and GPL licenses.
 *
 * Based on jQuery InnerFade by Torsten Baldes [url]http://medienfreunde.com/lab/innerfade/[/url]
 *
 * Available options:
 *  effect:         Animation effect. Can be set to 'fade' or 'slide'. (Default: 'fade'),
 *  speed:          Transition speed in milliseconds or keywords 'slow', 'normal' or 'fast'. (Default: 'normal'),
 *  timeout:        Delay between transitions in milliseconds (Default: '2000'),
 *  order:          Items order. Can be set to 'sequence', 'random' or 'random-start'. (Default: 'sequence'),
 *  height:         Container height. (Default: 'auto'),
 *  containerClass: CSS class to added into container. (Default: false),
 *  children:       jQuery children selector (Default: false)
 *  onBefore:       Callback that fires right before the transition. It receives the following arguments:
 *                  current item index, last item index, current item, last item and items. (Default: false)
 */
 
(function($) {
 
    var xfade = [];
    var $xfadeContainers = [];
 
    $.fn.xfade = function(options) {
        return this.each(function(i) {
            $xfadeContainers.push($(this));
 
            xfade[i] = {
                container:  null,
                settings:   {
                    'effect':           'fade',
                    'speed':            'normal',
                    'order':            'sequence',
                    'timeout':          9000,
                    'height':           'auto',
                    'containerClass':   false,
                    'children':         false,
                    'onBefore':         false
                },
                timeout:    900,
                current:    1,
                last:       0,
                init: function(container, options) {
                    var me = this;
                    me.container = container;
 
                    if (options) $.extend(me.settings, options);
 
                    var elements = me.items();
 
                    if (elements.length > 1) {
                        $(me.container).css({position: 'relative', height: me.settings.height});
                        if (me.settings.containerClass) $(me.container).addClass(me.settings.containerClass);
 
                        for (var i = 0; i < elements.length; i++) {
                            $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
                        };
 
                        if (me.settings.order == 'sequence') {
                            me.onBefore(0, null, $(elements[0]), null, elements);
                            me.timeout = setTimeout(function() {
                                me.next();
                            }, me.settings.timeout);
 
                            $(elements[me.last]).show();
                        } else if (me.settings.order == 'random') {
                            me.last = Math.floor (Math.random() * elements.length);
                            do {
                                me.current = Math.floor (Math.random() * elements.length);
                            } while (me.last == me.current );
 
                            me.onBefore(me.current, me.last, $(elements[me.current]), $(elements[me.last]), elements);
                            me.timeout = setTimeout(function() {
                                me.next();
                            }, me.settings.timeout);
 
                            $(elements[me.current]).show();
                        } else if (me.settings.order == 'random-start') {
                            me.settings.order = 'sequence';
                            me.current = Math.floor (Math.random() * elements.length);
 
                            me.onBefore(me.current, me.last, $(elements[me.current]), $(elements[me.last]), elements);
                            me.timeout = setTimeout(function(){
                                me.next();
                            }, me.settings.timeout);
                            $(elements[me.current]).show();
                        } else {
                            alert('xfade:order must either be \'sequence\', \'random\' or \'random-start\'');
                        }
                    }
                },
                items: function() {
                    var me = this;
                    if (me.settings.children) return $(me.container).children();
                    else return $(me.container).children(me.settings.children);
                },
                next: function() {
                    var me = this;
                    var elements = me.items();
                    
                    me.onBefore(me.current, me.last, $(elements[me.current]), $(elements[me.last]), elements);
 
                    if (me.settings.effect == 'slide') {
                        $(elements[me.last]).slideUp(me.settings.speed);
                        $(elements[me.current]).slideDown(me.settings.speed);
                    } else if (me.settings.effect == 'slider') {
                        $(elements[me.last]).fadeOut(me.settings.speed);
                        $(elements[me.current]).fadeIn(me.settings.speed, function() {
                            removeFilter($(this)[0]);
                        });
                    } else
                        alert('xfade:effect must either be \'slide\' or \'fade\'');
 
                    if (me.settings.order == 'sequence') {
                        if ((me.current + 1) < elements.length) {
                            me.current += 1;
                            me.last = me.current - 1;
                        } else {
                            me.current = 0;
                            me.last = elements.length - 1;
                        }
                    } else if (me.settings.order == 'random') {
                        me.last = me.current;
                        while (me.current == me.last) me.current = Math.floor(Math.random() * elements.length);
                    } else {
                        alert('xfade:order must either be \'sequence\', \'random\' or \'random-start\'');
                    }
 
                    me.timeout = setTimeout((function() {
                        me.next(elements);
                    }), me.settings.timeout);
                },
                to: function(element) {
                    var me = this;
 
                    if (typeof(element) == 'object' && element.jquery) {
                        if (element.length == 0) return false;
 
                        $.each(me.items(), function(i) {
                            if ($(this)[0] == element[0]) element = i;
                        });
                    }
 
                    $.each(me.items(), function() {
                        if ($(this).css('display') != 'none') $(this).fadeOut();
                    })
 
                    clearTimeout(me.timeout);
                    me.current = element;
                    me.next();
                },
                refresh: function() {
                    var me = this;
                    var elements = me.items();
 
                    $.each(elements, function(i) {
                        $(this).css({'z-index': String(elements.length - i), 'position': 'absolute'});
                        if (i != me.last) $(this).css({'display': 'none'});
                    });
                },
                onBefore: function(current, last, e_current, e_last, elements) {
                    var me = this;
 
                    if (typeof(me.settings.onBefore) == 'function') me.settings.onBefore(current, last, e_current, e_last, elements);
                }
            };
 
            xfade[i].init(this, options);
 
        });
    };
 
    $.xfadeInstance = function(container) {
        var i = 0;
 
        do {
          if ($($xfadeContainers[i]).get(0) == $(container).get(0)) return xfade[i];
          i++;
        } while (i < $xfadeContainers.length - 1)
        
        return false;
    };
 
    $.fn.xfadeNext = function() {
      var xfade = $.xfadeInstance(this);
      if (xfade) xfade.next();
    };
 
    $.fn.xfadeTo = function(item) {
        var xfade = $.xfadeInstance(this);
        if (xfade) xfade.to(item);
    };
 
    $.fn.xfadeRefresh = function(item) {
        var xfade = $.xfadeInstance(this);
        if (xfade) xfade.refresh(item);
    };
 
})(jQuery);
 
// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
    if(element.style.removeAttribute){
        element.style.removeAttribute('filter');
    }
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
31.07.2015, 22:25
Ответы с готовыми решениями:

Как сделать автоматическую смену слайдов?
Как сделать автоматическую смену слайдов? Может цикл есть, или каков принцип?

Powerpoint - установить автоматическую смену слайдов
Всем привет, Помогите установить автоматическую смену слайдов. Так, что бы запустить 1 раз...

Необходимо сделать автоматическую прокрутку слайдов на CSS
&lt;body&gt; &lt;div id='slideshow' class=&quot;sp-slideshow&quot;&gt; &lt;input...

Как сделать смену слайдов по секундам?
Как сделать смену слайдов https://ideone.com/iBGuYA

4
94 / 94 / 68
Регистрация: 26.03.2015
Сообщений: 248
01.08.2015, 09:21 2
Если еще актуально, скиньте весь плагин с HTML и CSS.
0
0 / 0 / 0
Регистрация: 31.07.2015
Сообщений: 4
01.08.2015, 15:08  [ТС] 3
РАЗМЕТКА:
HTML5
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
<div id="slider" class="col-lg-6">
                    <ul id="photos">
                        <li id="photo-1"><a href="#p1"><img src="img/bigFoto.jpg"/></a></li>
                        <li id="photo-2"><a href="#p2"><img src="img/bigFoto2.jpg"/></a></li>
                        <li id="photo-3"><a href="#p3"><img src="img/bigFoto3.jpg"/></a></li>
                        <li id="photo-4"><a href="#p4"><img src="img/bigFoto4.jpg"/></a></li>
                        <li id="photo-5"><a href="#p5"><img src="img/bigFoto5.jpg"/></a></li>
                        <li id="photo-6"><a href="#p6"><img src="img/bigFoto6.jpg"/></a></li>
                        <li id="photo-7"><a href="#p7"><img src="img/bigFoto7.jpg"/></a></li>
                        <li id="photo-8"><a href="#p8"><img src="img/bigFoto8.jpg"/></a></li>
                        <li id="photo-9"><a href="#p9"><img src="img/bigFoto9.jpg"/></a></li>
                    </ul>
  
                    <ul id="thumbs">
                        <li id="thumb-1"><a href="#t1"><img src="img/smallFoto.jpg" /></a></li>
                        <li id="thumb-2"><a href="#t2"><img src="img/smallFoto.jpg" /></a></li>
                        <li id="thumb-3"><a href="#t3"><img src="img/smallFoto.jpg" /></a></li>
                        <li id="thumb-4"><a href="#t4"><img src="img/smallFoto.jpg" /></a></li>
                        <li id="thumb-5"><a href="#t5"><img src="img/smallFoto.jpg" /></a></li>
                        <li id="thumb-6"><a href="#t6"><img src="img/smallFoto.jpg" /></a></li>
                        <li id="thumb-7"><a href="#t7"><img src="img/smallFoto.jpg" /></a></li>
                        <li id="thumb-8"><a href="#t8"><img src="img/smallFoto.jpg" /></a></li>
                        <li id="thumb-9"><a href="#t9"><img src="img/smallFoto.jpg" /></a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#photos{ text-align: center; position: relative;}
 
 
 #photos li{width: 100%;}
#thumbs {
  margin: 15px -5px;
  clear: both;
}
#thumbs li {
  float: left;
  opacity: .6;
  width: 33.3333337%;
  display: inline-block;
  padding: 5px;
}
0
311 / 105 / 69
Регистрация: 18.04.2015
Сообщений: 342
01.08.2015, 21:13 4
Найдите и удалите все конструкции:
Javascript
1
2
3
me.timeout = setTimeout((function() {
                        me.next(elements);
                    }), me.settings.timeout);
и

Javascript
1
clearTimeout(me.timeout);
0
0 / 0 / 0
Регистрация: 31.07.2015
Сообщений: 4
01.08.2015, 23:37  [ТС] 5
Спасибо огромное, теперь я знаю чуть больше. Буду учить JS чтобы уметь разбираться
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.08.2015, 23:37

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как отключить автоматическую смену раскладки клавиатуры?
При открытии браузера либо другой программы раскладка меняется. Можно ли это как-то исправить?

Как реализовать автоматическую смену паролей для Outlook?
Есть ли возможность автоматически сменить пароль для почтового клиента Outlook на стороне клиента...

Как автоматизировать смену слайдов при наличии вставленных видеозаписей
В презентации у меня сменяются фотографии, а на некоторые слайды я разместил видеозаписи в формате...

Убрать touch-пролистывание картинок карусели
Как убрать функцию пролистывания мышью? т.е. сейчас: нажимаешь ЛкМ и тащишь карусель в сторону, но...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.