Heim > Web-Frontend > HTML-Tutorial > 图片轮播_html/css_WEB-ITnose

图片轮播_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:39:25
Original
1182 Leute haben es durchsucht


当滚动到第四张图片时,会快速滚到第三张,第二张,第一张图片
当我想轮播时,第四张轮播玩就滚到第一张,


回复讨论(解决方案)

看看这个咯
http://bbs.blueidea.com/thread-3049362-1-1.html

你轮播的时候是不是有个index值啊,在轮播到第四张的时候改为1

https://github.com/idiot/unslider/blob/master/src/unslider.js
我是用这个插件来做的

(function (e, t) {    var n = function () {        function r(t, r) {            if (t == "dot") {                r = '<ol class="dots">';                e.each(n.li, function (e) {                    r += '<li class="' + (e == n.i ? t + " active" : t) + '">' + ++e + "</li>"                });                r += "</ol>"            } else {                r = '<div class="';                r = r + t + 's">' + r + t + ' prev">' + n.o.prev + "</div>" + r + t + ' next">' + n.o.next + "</div></div>"            }            n.el.addClass("has-" + t + "s").append(r).find("." + t).click(function () {                var t = e(this);                t.hasClass("dot") ? n.stop().to(t.index()) : t.hasClass("prev") ? n.prev() : n.next()            })        }        var n = this;        n.o = {            speed: 500,            delay: 3e3,            init: 0,            pause: !t,            loop: !t,            keys: t,            dots: t,            arrows: t,            prev: "&larr;",            next: "&rarr;",            fluid: t,            starting: t,            complete: t,            items: ">ul",            item: ">li",            easing: "swing",            autoplay: true        };        n.init = function (t, i) {            n.o = e.extend(n.o, i);            n.el = t;            n.ul = t.find(n.o.items);            n.max = [t.outerWidth() | 0, t.outerHeight() | 0];            n.li = n.ul.find(n.o.item).each(function (t) {                var r = e(this), i = r.outerWidth(), s = r.outerHeight();                if (i > n.max[0])n.max[0] = i;                if (s > n.max[1])n.max[1] = s            });            var i = n.o, s = n.ul, o = n.li, u = o.length;            n.i = 0;            t.css({width: n.max[0], height: o.first().outerHeight(), overflow: "hidden"});            s.css({position: "relative", left: 0, width: u * 100 + "%"});            o.css({"float": "left", width: n.max[0] + "px"});            i.autoplay && setTimeout(function () {                if (i.delay | 0) {                    n.play();                    if (i.pause) {                        t.on("mouseover mouseout", function (e) {                            n.stop();                            e.type == "mouseout" && n.play()                        })                    }                }            }, i.init | 0);            if (i.keys) {                e(document).keydown(function (e) {                    var t = e.which;                    if (t == 37)n.prev(); else if (t == 39)n.next(); else if (t == 27)n.stop()                })            }            i.dots && r("dot");            i.arrows && r("arrow");            if (i.fluid) {                e(window).resize(function () {                    n.r && clearTimeout(n.r);                    n.r = setTimeout(function () {                        var e = {height: o.eq(n.i).outerHeight()}, r = t.outerWidth();                        s.css(e);                        e["width"] = Math.min(Math.round(r / t.parent().width() * 100), 100) + "%";                        t.css(e)                    }, 50)                }).resize()            }            if (e.event.special["swipe"] || e.Event("swipe")) {                t.on("swipeleft swiperight swipeLeft swipeRight", function (e) {                    e.type.toLowerCase() == "swipeleft" ? n.next() : n.prev()                })            }            return n        };        n.to = function (r, i) {            if (n.t) {                n.stop();                n.play()            }            var s = n.o, o = n.el, u = n.ul, a = n.li, l = n.i, c = a.eq(r);            e.isFunction(s.starting) && !i && s.starting(o, a.eq(l));            if ((!c.length || r < 0) && s.loop == t)return;            if (!c.length)r = 0;            if (r < 0)r = a.length - 1;            c = a.eq(r);            var h = i ? 5 : s.speed | 0, p = s.easing, d = {height: c.outerHeight()};            if (!u.queue("fx").length) {                o.find(".dot").eq(r).addClass("active").siblings().removeClass("active");                o.animate(d, h, p) && u.animate(e.extend({left: "-" + r + "00%"}, d), h, p, function (t) {                    n.i = r;                    e.isFunction(s.complete) && !i && s.complete(o, c)                })            }        };        n.play = function () {            n.t = setInterval(function () {                n.to(n.i + 1)            }, n.o.delay | 0)        };        n.stop = function () {            n.t = clearInterval(n.t);            return n        };        n.next = function () {            return n.stop().to(n.i + 1)        };        n.prev = function () {            return n.stop().to(n.i - 1)        };    };    e.fn.unslider = function (t) {        var r = this.length;        return this.each(function (i) {            var s = e(this), u = "unslider" + (r > 1 ? "-" + ++i : ""), a = (new n).init(s, t);            s.data(u, a).data("key", u)        })    };    n.version = "1.0.0"})(jQuery, false)这个脚本我要怎么修改??
Nach dem Login kopieren
Nach dem Login kopieren

http://www.yxsss.com/ui/pic.html
可以去看看 也是图片轮播的



你的要求只需把源文件 http://unslider.com/unslider.js 中第 116 行
if(!this.items.eq(index).length) index = 0;
Nach dem Login kopieren

修改一下就行了

我这里修改了 116 和 117 两行, 修改后如下
			if(!this.items.eq(index).length) {index = 0; cb = true;}			if(index < 0) {index = (this.items.length - 1); cb = true;}
Nach dem Login kopieren


效果演示: http://a7d.net46.net/unslider_mod.php

源文件中 这行

var speed = cb ? 5 : this.opts.speed;
Nach dem Login kopieren

中的 5 指动画时间只持续 5 ms, 已经极小了, 和直接切换的效果差不多了, 当然想要绝对 可以把它改成 0

(function (e, t) {    var n = function () {        function r(t, r) {            if (t == "dot") {                r = '<ol class="dots">';                e.each(n.li, function (e) {                    r += '<li class="' + (e == n.i ? t + " active" : t) + '">' + ++e + "</li>"                });                r += "</ol>"            } else {                r = '<div class="';                r = r + t + 's">' + r + t + ' prev">' + n.o.prev + "</div>" + r + t + ' next">' + n.o.next + "</div></div>"            }            n.el.addClass("has-" + t + "s").append(r).find("." + t).click(function () {                var t = e(this);                t.hasClass("dot") ? n.stop().to(t.index()) : t.hasClass("prev") ? n.prev() : n.next()            })        }        var n = this;        n.o = {            speed: 500,            delay: 3e3,            init: 0,            pause: !t,            loop: !t,            keys: t,            dots: t,            arrows: t,            prev: "&larr;",            next: "&rarr;",            fluid: t,            starting: t,            complete: t,            items: ">ul",            item: ">li",            easing: "swing",            autoplay: true        };        n.init = function (t, i) {            n.o = e.extend(n.o, i);            n.el = t;            n.ul = t.find(n.o.items);            n.max = [t.outerWidth() | 0, t.outerHeight() | 0];            n.li = n.ul.find(n.o.item).each(function (t) {                var r = e(this), i = r.outerWidth(), s = r.outerHeight();                if (i > n.max[0])n.max[0] = i;                if (s > n.max[1])n.max[1] = s            });            var i = n.o, s = n.ul, o = n.li, u = o.length;            n.i = 0;            t.css({width: n.max[0], height: o.first().outerHeight(), overflow: "hidden"});            s.css({position: "relative", left: 0, width: u * 100 + "%"});            o.css({"float": "left", width: n.max[0] + "px"});            i.autoplay && setTimeout(function () {                if (i.delay | 0) {                    n.play();                    if (i.pause) {                        t.on("mouseover mouseout", function (e) {                            n.stop();                            e.type == "mouseout" && n.play()                        })                    }                }            }, i.init | 0);            if (i.keys) {                e(document).keydown(function (e) {                    var t = e.which;                    if (t == 37)n.prev(); else if (t == 39)n.next(); else if (t == 27)n.stop()                })            }            i.dots && r("dot");            i.arrows && r("arrow");            if (i.fluid) {                e(window).resize(function () {                    n.r && clearTimeout(n.r);                    n.r = setTimeout(function () {                        var e = {height: o.eq(n.i).outerHeight()}, r = t.outerWidth();                        s.css(e);                        e["width"] = Math.min(Math.round(r / t.parent().width() * 100), 100) + "%";                        t.css(e)                    }, 50)                }).resize()            }            if (e.event.special["swipe"] || e.Event("swipe")) {                t.on("swipeleft swiperight swipeLeft swipeRight", function (e) {                    e.type.toLowerCase() == "swipeleft" ? n.next() : n.prev()                })            }            return n        };        n.to = function (r, i) {            if (n.t) {                n.stop();                n.play()            }            var s = n.o, o = n.el, u = n.ul, a = n.li, l = n.i, c = a.eq(r);            e.isFunction(s.starting) && !i && s.starting(o, a.eq(l));            if ((!c.length || r < 0) && s.loop == t)return;            if (!c.length)r = 0;            if (r < 0)r = a.length - 1;            c = a.eq(r);            var h = i ? 5 : s.speed | 0, p = s.easing, d = {height: c.outerHeight()};            if (!u.queue("fx").length) {                o.find(".dot").eq(r).addClass("active").siblings().removeClass("active");                o.animate(d, h, p) && u.animate(e.extend({left: "-" + r + "00%"}, d), h, p, function (t) {                    n.i = r;                    e.isFunction(s.complete) && !i && s.complete(o, c)                })            }        };        n.play = function () {            n.t = setInterval(function () {                n.to(n.i + 1)            }, n.o.delay | 0)        };        n.stop = function () {            n.t = clearInterval(n.t);            return n        };        n.next = function () {            return n.stop().to(n.i + 1)        };        n.prev = function () {            return n.stop().to(n.i - 1)        };    };    e.fn.unslider = function (t) {        var r = this.length;        return this.each(function (i) {            var s = e(this), u = "unslider" + (r > 1 ? "-" + ++i : ""), a = (new n).init(s, t);            s.data(u, a).data("key", u)        })    };    n.version = "1.0.0"})(jQuery, false)这个脚本我要怎么修改??
Nach dem Login kopieren
Nach dem Login kopieren




if (!c.length)r = 0;if (r < 0)r = a.length - 1;
Nach dem Login kopieren




if (!c.length) {r = 0; i = true;}if (r < 0) {r = a.length - 1; i = true;} // 此行是控制右往左轮播到边缘的, 可以不改
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage