Автопрокрутка в jcarousellite
function inte() { var interval = setInterval(function(){ $('.main_slider .rt_arrow').click(); }, 4500); $('.main_slider').hover(function() { clearInterval(interval); }); $('.main_slider').mouseleave(function() { inte(); }); } inte(); $('.main_slider .rt_arrow') - это вперед. Можно ли сделать по-другому на данном плагине? т.к. она подглючивает и с течением времени пролистывает по 2 слайда :( |
На сколько я разобрался, дело в том, что при использовании jQuery можно задать более одного обработчика одному событию.
Например, при событии hover на .main_slider, такой код : $('.main_slider').hover(function() { alert('раз'); } $('.main_slider').hover(function() { alert('двас'); } выдаст оба события, сначала первое, затем второе. В вашем случае, каждый вызов функции inte(); добавляет для $('.main_slider') ещё один mouseleave с вызовом функции inte(); Т.е. навели раз, и при mouseleave вызываеться inte(); навели два, и при mouseleave вызываеться inte();inte(); (т.е. создаются два таймера), Решение: либо делать $('.main_slider').unbind('mouseleave'); (и hover) в .mouseleave(function(){ , либо, заменить $('.main_slider').mouseleave(function() { inte(); });на $('.main_slider').mouseleave(function() { interval = setInterval(function(){ $('.main_slider .rt_arrow').click(); }, 4500); }); ПС: сам я только изучаю JS, так что возможно что-то упустил. |
Nesquik,
а встроенный Auto Scroll ? |
Хех, есть такое дело, а ховер на колбек предлагаете вешать?
|
Nesquik,
hover можно встроить в плагин :write: |
А именно профессор? :)
|
Nesquik,
:write: <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <base href="http://www.gmarwaha.com/jquery/jcarousellite/" /> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> (function (d) { function g(a, e) { return parseInt(d.css(a[0], e)) || 0 } function u(a) { return a[0].offsetWidth + g(a, "marginLeft") + g(a, "marginRight") } function v(a) { return a[0].offsetHeight + g(a, "marginTop") + g(a, "marginBottom") } d.fn.jCarouselLite = function (a) { a = d.extend({ btnPrev: null, btnNext: null, btnGo: null, mouseWheel: !1, auto: null, speed: 200, easing: null, vertical: !1, circular: !0, visible: 3, start: 0, scroll: 1, beforeStart: null, afterEnd: null }, a || {}); return this.each(function () { function e(h) { if (!g) { a.beforeStart && a.beforeStart.call(this, f.slice(b).slice(0, c)); if (a.circular) h <= a.start - c - 1 ? (k.css(q, -((l - 2 * c) * m) + "px"), b = h == a.start - c - 1 ? l - 2 * c - 1 : l - 2 * c - a.scroll) : h >= l - c + 1 ? (k.css(q, -(c * m) + "px"), b = h == l - c + 1 ? c + 1 : c + a.scroll) : b = h; else { if (0 > h || h > l - c) return; b = h } g = !0; k.animate("left" == q ? { left: -(b * m) } : { top: -(b * m) }, a.speed, a.easing, function () { a.afterEnd && a.afterEnd.call(this, f.slice(b).slice(0, c)); g = !1 }); a.circular || (d(a.btnPrev + "," + a.btnNext).removeClass("disabled"), d(0 > b - a.scroll && a.btnPrev || b + a.scroll > l - c && a.btnNext || []).addClass("disabled")) } a.auto && (s = window.setTimeout(function () { e(b + a.scroll) }, a.auto + a.speed)); return !1 } var g = !1, q = a.vertical ? "top" : "left", t = a.vertical ? "height" : "width", n = d(this), k = d("ul", n), p = d("li", k), r = p.size(), c = a.visible; a.circular && (k.prepend(p.slice(r - c - 1 + 1).clone()).append(p.slice(0, c).clone()), a.start += c); var f = d("li", k), l = f.size(), b = a.start, s; n.css("visibility", "visible"); f.css({ overflow: "hidden", "float": a.vertical ? "none" : "left" }); k.css({ margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1" }); n.css({ overflow: "hidden", position: "relative", "z-index": "2", left: "0px" }); var m = a.vertical ? v(f) : u(f), p = m * l, r = m * c; f.css({ width: f.width(), height: f.height() }); k.css(t, p + "px").css(q, -(b * m)); n.css(t, r + "px"); a.btnPrev && d(a.btnPrev).click(function () { return e(b - a.scroll) }); a.btnNext && d(a.btnNext).click(function () { return e(b + a.scroll) }); a.btnGo && d.each(a.btnGo, function (b, c) { d(c).click(function () { return e(a.circular ? a.visible + b : b) }) }); a.mouseWheel && n.mousewheel && n.mousewheel(function (c, d) { return 0 < d ? e(b - a.scroll) : e(b + a.scroll) }); a.auto && e(b + a.scroll); d(this).hover(function () { window.clearTimeout(s) }, function () { a.auto && e(b + a.scroll) }) }) } })(jQuery);</script> <script>$(document).ready(function(){ $(".default .jCarouselLite").jCarouselLite({ auto: 300, speed: 1000 }); }); </script> </head> <body> <div class="carousel default"> <div class="jCarouselLite"> <ul> <li><img src="image/1.jpg" alt="" width="150" height="118"></li> <li><img src="image/2.jpg" alt="" width="150" height="118"></li> <li><img src="image/3.jpg" alt="" width="150" height="118"></li> <li><img src="image/4.jpg" alt="" width="150" height="118"></li> <li><img src="image/5.jpg" alt="" width="150" height="118"></li> <li><img src="image/6.jpg" alt="" width="150" height="118"></li> <li><img src="image/7.jpg" alt="" width="150" height="118"></li> <li><img src="image/8.jpg" alt="" width="150" height="118"></li> <li><img src="image/9.jpg" alt="" width="150" height="118"></li> <li><img src="image/10.jpg" alt="" width="150" height="118"></li> <li><img src="image/11.jpg" alt="" width="150" height="118"></li> </ul> </div> <div class="clear"></div> </div> <div class="carousel default"> <div class="jCarouselLite"> <ul> <li><img src="image/1.jpg" alt="" width="150" height="118"></li> <li><img src="image/2.jpg" alt="" width="150" height="118"></li> <li><img src="image/3.jpg" alt="" width="150" height="118"></li> <li><img src="image/4.jpg" alt="" width="150" height="118"></li> <li><img src="image/5.jpg" alt="" width="150" height="118"></li> <li><img src="image/6.jpg" alt="" width="150" height="118"></li> <li><img src="image/7.jpg" alt="" width="150" height="118"></li> <li><img src="image/8.jpg" alt="" width="150" height="118"></li> <li><img src="image/9.jpg" alt="" width="150" height="118"></li> <li><img src="image/10.jpg" alt="" width="150" height="118"></li> <li><img src="image/11.jpg" alt="" width="150" height="118"></li> </ul> </div> <div class="clear"></div> </div> </body> </html> |
Часовой пояс GMT +3, время: 23:02. |