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

@vanyakilkil · Регистрация: 13.06.2012

Студворк — интернет-сервис помощи студентам

Как сделать автоматическую прокрутку слайдера? Я не пойму что здесь за нее отвечает. Хромают знания Js. И еще хотелось бы узнать как из него сделать вертикальный. Пожалуйста, помогите мне кто может. ВОт все скрипты с этого слайдера которые находятся на компьютере.

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
/*
            the images preload plugin
            */
            (function($) {
                $.fn.preload = function(options) {
                    var opts    = $.extend({}, $.fn.preload.defaults, options),
                        o       = $.meta ? $.extend({}, opts, this.data()) : opts;
                    return this.each(function() {
                        var $e  = $(this),
                            t   = $e.attr('rel'),
                            i   = $e.attr('href'),
                            l   = 0;
                        $('<img/>').load(function(i){
                            ++l;
                            if(l==2) o.onComplete();
                        }).attr('src',i);   
                        $('<img/>').load(function(i){
                            ++l;
                            if(l==2) o.onComplete();
                        }).attr('src',t);   
                    });
                };
                $.fn.preload.defaults = {
                    onComplete  : function(){return false;}
                };
            })(jQuery);

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
$(function() {
                //some elements..
                var $ps_container       = $('#ps_container'),
                    $ps_image_wrapper   = $ps_container.find('.ps_image_wrapper'),
                    $ps_next            = $ps_container.find('.ps_next'),
                    $ps_prev            = $ps_container.find('.ps_prev'),
                    $ps_nav             = $ps_container.find('.ps_nav'),
                    $tooltip            = $ps_container.find('.ps_preview'),
                    $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
                    $links              = $ps_nav.children('li').not($tooltip),
                    total_images        = $links.length,
                    currentHovered      = -1,
                    current             = 0,
                    $loader             = $('#loader');
                
                /*check if you are using a browser*/    
                var ie              = false;
                if ($.browser.msie) {
                    ie = true;//you are not!Anyway let's give it a try
                }
                if(!ie)
                    $tooltip.css({
                        opacity : 0
                    }).show();
                    
                    
                /*first preload images (thumbs and large images)*/
                var loaded  = 0;
                $links.each(function(i){
                    var $link   = $(this);
                    $link.find('a').preload({
                        onComplete  : function(){
                            ++loaded;
                            if(loaded == total_images){
                                //all images preloaded,
                                //show ps_container and initialize events
                                $loader.hide();
                                $ps_container.show();
                                //when mouse enters the pages (the dots),
                                //show the tooltip,
                                //when mouse leaves hide the tooltip,
                                //clicking on one will display the respective image 
                                $links.bind('mouseenter',showTooltip)
                                      .bind('mouseleave',hideTooltip)
                                      .bind('click',showImage);
                                //navigate through the images
                                $ps_next.bind('click',nextImage);
                                $ps_prev.bind('click',prevImage);
                            }
                        }
                    });
                });
                
                function showTooltip(){
                    var $link           = $(this),
                        idx             = $link.index(),
                        linkOuterWidth  = $link.outerWidth(),
                        //this holds the left value for the next position
                        //of the tooltip
                        left            = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
                        //the thumb image source
                        $thumb          = $link.find('a').attr('rel'),
                        imageLeft;
                    
                    //if we are not hovering the current one
                    if(currentHovered != idx){
                        //check if we will animate left->right or right->left
                        if(currentHovered != -1){
                            if(currentHovered < idx){
                                imageLeft   = 75;
                            }
                            else{
                                imageLeft   = -75;
                            }
                        }
                        currentHovered = idx;
                        
                        //the next thumb image to be shown in the tooltip
                        var $newImage = $('<img/>').css('left','0px')
                                                   .attr('src',$thumb);
                        
                        //if theres more than 1 image 
                        //(if we would move the mouse too fast it would probably happen)
                        //then remove the oldest one (:last)
                        if($ps_preview_wrapper.children().length > 1)
                            $ps_preview_wrapper.children(':last').remove();
                        
                        //prepend the new image
                        $ps_preview_wrapper.prepend($newImage);
                        
                        var $tooltip_imgs       = $ps_preview_wrapper.children(),
                            tooltip_imgs_count  = $tooltip_imgs.length;
                            
                        //if theres 2 images on the tooltip
                        //animate the current one out, and the new one in
                        if(tooltip_imgs_count > 1){
                            $tooltip_imgs.eq(tooltip_imgs_count-1)
                                         .stop()
                                         .animate({
                                            left:-imageLeft+'px'
                                          },150,function(){
                                                //remove the old one
                                                $(this).remove();
                                          });
                            $tooltip_imgs.eq(0)
                                         .css('left',imageLeft + 'px')
                                         .stop()
                                         .animate({
                                            left:'0px'
                                          },150);
                        }
                    }
                    //if we are not using a "browser", we just show the tooltip,
                    //otherwise we fade it
                    //
                    if(ie)
                        $tooltip.css('left',left + 'px').show();
                    else
                    $tooltip.stop()
                            .animate({
                                left        : left + 'px',
                                opacity     : 1
                            },150);
                }
                
                function hideTooltip(){
                    //hide / fade out the tooltip
                    if(ie)
                        $tooltip.hide();
                    else
                    $tooltip.stop()
                            .animate({
                                opacity     : 0
                            },150);
                }
                
                function showImage(e){
                    var $link               = $(this),
                        idx                 = $link.index(),
                        $image              = $link.find('a').attr('href'),
                        $currentImage       = $ps_image_wrapper.find('img'),
                        currentImageWidth   = $currentImage.width();
                    
                    //if we click the current one return
                    if(current == idx) return false;
                    
                    //add class selected to the current page / dot
                    $links.eq(current).removeClass('selected');
                    $link.addClass('selected');
                    
                    //the new image element
                    var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
                                               .attr('src',$image);
                    
                    //if the wrapper has more than one image, remove oldest
                    if($ps_image_wrapper.children().length > 1)
                        $ps_image_wrapper.children(':last').remove();
                    
                    //prepend the new image
                    $ps_image_wrapper.prepend($newImage);
                    
                    //the new image width. 
                    //This will be the new width of the ps_image_wrapper
                    var newImageWidth   = $newImage.width();
                
                    //check animation direction
                    if(current > idx){
                        $newImage.css('left',-newImageWidth + 'px');
                        currentImageWidth = -newImageWidth;
                    }   
                    current = idx;
                    //animate the new width of the ps_image_wrapper 
                    //(same like new image width)
                    $ps_image_wrapper.stop().animate({
                        width   : newImageWidth + 'px'
                    },350);
                    //animate the new image in
                    $newImage.stop().animate({
                        left    : '0px'
                    },350);
                    //animate the old image out
                    $currentImage.stop().animate({
                        left    : -currentImageWidth + 'px'
                    },350);
                
                    e.preventDefault();
                }               
                
                function nextImage(){
                    if(current < total_images){
                        $links.eq(current+1).trigger('click');
                    }
                }
                function prevImage(){
                    if(current > 0){
                        $links.eq(current-1).trigger('click');
                    }
                }
            });

@OT_VINTA · 10.09.2013, 10:49

Вставьте в конец

JavaScript
1
setInterval(nextImage, 5000)

Изображение будет меняться каждые 5 секунд

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .