|
|
Модератор форума: JonMagon |
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Помогите поправить слайдер |
Помогите поправить слайдер |
Повесил слайдер на сайт http://novakom-online.ru/, все работает, но мне не нравится один нюанс, когда доходит до конца списка он возвращается назад, прокручивая все предыдущие слайды, я хочу добиться чтобы дойдя до последнего слайда он продолжал листать их дальше начиная с первого, типа непрерывного круга, перелопатил весь скрипт а добиться так и не смог, помогите пожалуйста...
скрипт: $(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; rotateSwitch = function(){ play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 5000); }; rotateSwitch(); $(".image_reel a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); Сss: .container1 {width: 225px; padding: 0; margin: 0 auto;} .main_view {float: left; position: relative; margin-bottom: 37px;} .window {height:225px; width: 686px; overflow: hidden; position: relative;} .image_reel {position: absolute; top: 0; left: 0;} .image_reel img {float: left;} .paging {position: absolute; bottom: -10px; right: 540px; width: 175px; height:45px; z-index: 100; text-align: center; line-height: 40px; display: none;} .paging a {padding: 3px; text-decoration: none; color: #fff;} .paging a.active {font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 5px; -khtml-border-radius: 3px; -webkit-border-radius: 3px;} |
| |||
| |||