jQuery基本滑块到缩略图的图库

Question

我正在尝试将www.basic-slider.com的jQuery插件实现到图库中。该插件目前所做的是在内部的图像之间创建转换。 li> HTML中的标记并在底部生成框，其中的数值对应于每个图像的顺序。

我希望生成的框显示每个图像的缩略图而不是数值。我试过调试jQuery代码没有任何运气，因此我在这里寻求帮助。

这就是目前的样子以及我想要实现的目标： IMAGE

DEMO HERE

PLUGIN CONTROLS

jQuery(document).ready(function($) {
      $('#banner-fade').bjqs({
        animtype: 'fade',
        height: 360,
        width:480,
        animspeed: 40,
        animduraion: 40,
        showcontrols:true,
        centercontrols:true,
        nexttext:'>',
        prevtext:'<',
        showmarker:true,
        centermarkers:true,
        keyboardnav:false,
        hoverpause:true,
        automatic: false,
        responsive: true,
        randomstart: false,
      });          
});

HTML

<div id="banner-fade">
<ul class="bjqs">
    <li><img src="1.jpg"/></li>
    <li><img src="2.jpg"/</li>
    <li><img src="3.jpg"/></li>
    <li><img src="4.jpg"/></li>
</ul>
</div>

CSS

#banner-fade {
margin:0;
width:480px;
height:540px;
float:left;
margin:0;
}
ul.bjqs-controls.v-centered li a {
display:block;
padding:10px;
color:#fff;
text-decoration: none;
}
ul.bjqs-controls.v-centered li a:hover {
background:#3c3c3c;
color:#fff;
}
ol.bjqs-markers li a {
width:120px;
height:90px;
font-size:80px;
background-size:120px 90px;
color:#000;
margin:0;
text-align:center;
text-decoration: none;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
background: #fad703;
}
p.bjqs-caption {
background: rgba(255, 255, 255, 0.5);
}
ul.bjqs {
position:relative;
list-style:none;
padding:0;
margin:0;
overflow:hidden;
display:none;
}
li.bjqs-slide {
position:absolute;
display:none;
}
ul.bjqs-controls {
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
ul.bjqs-controls.v-centered li a {
position:absolute;
}
ul.bjqs-controls.v-centered li.bjqs-next a {
right:0;
}
ul.bjqs-controls.v-centered li.bjqs-prev a {
left:0;
}
ol.bjqs-markers {
list-style: none;
padding: 0;
margin:0;
width:100%;
}
ol.bjqs-markers.h-centered {
text-align: left;
font-size:0;
}
ol.bjqs-markers li {
display:inline;
}
ol.bjqs-markers li a {
display:inline-block;
}

的jQuery

(function (e) {
"use strict";
e.fn.bjqs = function (t) {
    var n = {
        width: 700,
        height: 300,
        animtype: "fade",
        animduration: 450,
        animspeed: 4e3,
        automatic: !0,
        showcontrols: !0,
        centercontrols: !0,
        nexttext: ">",
        prevtext: "<",
        showmarkers: !0,
        centermarkers: !0,
        keyboardnav: !0,
        hoverpause: !0,
        usecaptions: !0,
        randomstart: !1,
        responsive: !1
    }, r = e.extend({}, n, t),
        i = this,
        s = i.find("ul.bjqs"),
        o = s.children("li"),
        u = null,
        a = null,
        f = null,
        l = null,
        c = null,
        h = null,
        p = null,
        d = null,
        v = {
            slidecount: o.length,
            animating: !1,
            paused: !1,
            currentslide: 1,
            nextslide: 0,
            currentindex: 0,
            nextindex: 0,
            interval: null
        }, m = {
            width: null,
            height: null,
            ratio: null
        }, g = {
            fwd: "forward",
            prev: "previous"
        }, y = function () {
            o.addClass("bjqs-slide");
            r.responsive ? b() : E();
            if (v.slidecount > 1) {
                r.randomstart && L();
                r.showcontrols && x();
                r.showmarkers && T();
                r.keyboardnav && N();
                r.hoverpause && r.automatic && C();
                r.animtype === "slide" && S()
            }
            r.usecaptions && k();
            if (r.animtype === "slide" && !r.randomstart) {
                v.currentindex = 1;
                v.currentslide = 2
            }
            s.show();
            o.eq(v.currentindex).show();
            r.automatic && (v.interval = setInterval(function () {
                O(g.fwd, !1)
            }, r.animspeed))
        }, b = function () {
            m.width = i.outerWidth();
            m.ratio = m.width / r.width, m.height = r.height * m.ratio;
            if (r.animtype === "fade") {
                o.css({
                    height: r.height,
                    width: "100%"
                });
                o.children("img").css({
                    height: r.height,
                    width: "100%"
                });
                s.css({
                    height: r.height,
                    width: "100%"
                });
                i.css({
                    height: r.height,
                    "max-width": r.width,
                    position: "relative"
                });
                if (m.width < r.width) {
                    o.css({
                        height: m.height
                    });
                    o.children("img").css({
                        height: m.height
                    });
                    s.css({
                        height: m.height
                    });
                    i.css({
                        height: m.height
                    })
                }
                e(window).resize(function () {
                    m.width = i.outerWidth();
                    m.ratio = m.width / r.width, m.height = r.height * m.ratio;
                    o.css({
                        height: m.height
                    });
                    o.children("img").css({
                        height: m.height
                    });
                    s.css({
                        height: m.height
                    });
                    i.css({
                        height: m.height
                    })
                })
            }
            if (r.animtype === "slide") {
                o.css({
                    height: r.height,
                    width: r.width
                });
                o.children("img").css({
                    height: r.height,
                    width: r.width
                });
                s.css({
                    height: r.height,
                    width: r.width * r.slidecount
                });
                i.css({
                    height: r.height,
                    "max-width": r.width,
                    position: "relative"
                });
                if (m.width < r.width) {
                    o.css({
                        height: m.height
                    });
                    o.children("img").css({
                        height: m.height
                    });
                    s.css({
                        height: m.height
                    });
                    i.css({
                        height: m.height
                    })
                }
                e(window).resize(function () {
                    m.width = i.outerWidth(), m.ratio = m.width / r.width, m.height = r.height * m.ratio;
                    o.css({
                        height: m.height,
                        width: m.width
                    });
                    o.children("img").css({
                        height: m.height,
                        width: m.width
                    });
                    s.css({
                        height: m.height,
                        width: m.width * r.slidecount
                    });
                    i.css({
                        height: m.height
                    });
                    h.css({
                        height: m.height,
                        width: m.width
                    });
                    w(function () {
                        O(!1, v.currentslide)
                    }, 200, "some unique string")
                })
            }
        }, w = function () {
            var e = {};
            return function (t, n, r) {
                r || (r = "Don't call this twice without a uniqueId");
                e[r] && clearTimeout(e[r]);
                e[r] = setTimeout(t, n)
            }
        }(),
        E = function () {
            o.css({
                height: r.height,
                width: r.width
            });
            s.css({
                height: r.height,
                width: r.width
            });
            i.css({
                height: r.height,
                width: r.width,
                position: "relative"
            })
        }, S = function () {
            p = o.eq(0).clone();
            d = o.eq(v.slidecount - 1).clone();
            p.attr({
                "data-clone": "last",
                "data-slide": 0
            }).appendTo(s).show();
            d.attr({
                "data-clone": "first",
                "data-slide": 0
            }).prependTo(s).show();
            o = s.children("li");
            v.slidecount = o.length;
            h = e('<div class="bjqs-wrapper"></div>');
            if (r.responsive && m.width < r.width) {
                h.css({
                    width: m.width,
                    height: m.height,
                    overflow: "hidden",
                    position: "relative"
                });
                s.css({
                    width: m.width * (v.slidecount + 2),
                    left: -m.width * v.currentslide
                })
            } else {
                h.css({
                    width: r.width,
                    height: r.height,
                    overflow: "hidden",
                    position: "relative"
                });
                s.css({
                    width: r.width * (v.slidecount + 2),
                    left: -r.width * v.currentslide
                })
            }
            o.css({
                "float": "left",
                position: "relative",
                display: "list-item"
            });
            h.prependTo(i);
            s.appendTo(h)
        }, x = function () {
            u = e('<ul class="bjqs-controls"></ul>');
            a = e('<li class="bjqs-next"><a href="#" data-direction="' + g.fwd + '">' + r.nexttext + "</a></li>");
            f = e('<li class="bjqs-prev"><a href="#" data-direction="' + g.prev + '">' + r.prevtext + "</a></li>");
            u.on("click", "a", function (t) {
                t.preventDefault();
                var n = e(this).attr("data-direction");
                if (!v.animating) {
                    n === g.fwd && O(g.fwd, !1);
                    n === g.prev && O(g.prev, !1)
                }
            });
            f.appendTo(u);
            a.appendTo(u);
            u.appendTo(i);
            if (r.centercontrols) {
                u.addClass("v-centered");
                var t = (i.height() - a.children("a").outerHeight()) / 2,
                    n = t / r.height * 100,
                    s = n + "%";
                a.find("a").css("top", s);
                f.find("a").css("top", s)
            }
        }, T = function () {
            l = e('<ol class="bjqs-markers"></ol>');
            e.each(o, function (t, n) {
                var i = t + 1,
                    s = t + 1;
                r.animtype === "slide" && (s = t + 2);
                var o = e('<li><a href="#">' + i + "</a></li>");
                i === v.currentslide && o.addClass("active-marker");
                o.on("click", "a", function (e) {
                    e.preventDefault();
                    !v.animating && v.currentslide !== s && O(!1, s)
                });
                o.appendTo(l)
            });
            l.appendTo(i);
            c = l.find("li");
            if (r.centermarkers) {
                l.addClass("h-centered");
                var t = (r.width - l.width()) / 2;
                l.css("left", t)
            }
        }, N = function () {
            e(document).keyup(function (e) {
                if (!v.paused) {
                    clearInterval(v.interval);
                    v.paused = !0
                }
                if (!v.animating) if (e.keyCode === 39) {
                    e.preventDefault();
                    O(g.fwd, !1)
                } else if (e.keyCode === 37) {
                    e.preventDefault();
                    O(g.prev, !1)
                }
                if (v.paused && r.automatic) {
                    v.interval = setInterval(function () {
                        O(g.fwd)
                    }, r.animspeed);
                    v.paused = !1
                }
            })
        }, C = function () {
            i.hover(function () {
                if (!v.paused) {
                    clearInterval(v.interval);
                    v.paused = !0
                }
            }, function () {
                if (v.paused) {
                    v.interval = setInterval(function () {
                        O(g.fwd, !1)
                    }, r.animspeed);
                    v.paused = !1
                }
            })
        }, k = function () {
            e.each(o, function (t, n) {
                var r = e(n).children("img:first-child").attr("title");
                r || (r = e(n).children("a").find("img:first-child").attr("title"));
                if (r) {
                    r = e('<p class="bjqs-caption">' + r + "</p>");
                    r.appendTo(e(n))
                }
            })
        }, L = function () {
            var e = Math.floor(Math.random() * v.slidecount) + 1;
            v.currentslide = e;
            v.currentindex = e - 1
        }, A = function (e) {
            if (e === g.fwd) if (o.eq(v.currentindex).next().length) {
                v.nextindex = v.currentindex + 1;
                v.nextslide = v.currentslide + 1
            } else {
                v.nextindex = 0;
                v.nextslide = 1
            } else if (o.eq(v.currentindex).prev().length) {
                v.nextindex = v.currentindex - 1;
                v.nextslide = v.currentslide - 1
            } else {
                v.nextindex = v.slidecount - 1;
                v.nextslide = v.slidecount
            }
        }, O = function (e, t) {
            if (!v.animating) {
                v.animating = !0;
                if (t) {
                    v.nextslide = t;
                    v.nextindex = t - 1
                } else A(e);
                if (r.animtype === "fade") {
                    if (r.showmarkers) {
                        c.removeClass("active-marker");
                        c.eq(v.nextindex).addClass("active-marker")
                    }
                    o.eq(v.currentindex).fadeOut(r.animduration);
                    o.eq(v.nextindex).fadeIn(r.animduration, function () {
                        v.animating = !1;
                        v.currentslide = v.nextslide;
                        v.currentindex = v.nextindex
                    })
                }
                if (r.animtype === "slide") {
                    if (r.showmarkers) {
                        var n = v.nextindex - 1;
                        n === v.slidecount - 2 ? n = 0 : n === -1 && (n = v.slidecount - 3);
                        c.removeClass("active-marker");
                        c.eq(n).addClass("active-marker")
                    }
                    r.responsive && m.width < r.width ? v.slidewidth = m.width : v.slidewidth = r.width;
                    s.animate({
                        left: -v.nextindex * v.slidewidth
                    }, r.animduration, function () {
                        v.currentslide = v.nextslide;
                        v.currentindex = v.nextindex;
                        if (o.eq(v.currentindex).attr("data-clone") === "last") {
                            s.css({
                                left: -v.slidewidth
                            });
                            v.currentslide = 2;
                            v.currentindex = 1
                        } else if (o.eq(v.currentindex).attr("data-clone") === "first") {
                            s.css({
                                left: -v.slidewidth * (v.slidecount - 2)
                            });
                            v.currentslide = v.slidecount - 1;
                            v.currentindex = v.slidecount - 2
                        }
                        v.animating = !1
                    })
                }
            }
        };
    y()
}
})(jQuery);

Answer 1

演示：http://jsfiddle.net/XX744/

<强> HTML

<div class="slideshow">
    <ul class='big'>
        <li>
            <img src="http://imageshack.us/a/img845/6999/ut3b.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img850/1646/pu9p.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img22/4640/6a5q.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img513/4973/h6g3.jpg" />
        </li>
    </ul>
    <ul class='controls'>
        <li class='prev'>&lt;</li>
        <li class='next'>&gt;</li>
    </ul>
    <ul class='thumb'>
        <li>
            <img src="http://imageshack.us/a/img845/6999/ut3b.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img850/1646/pu9p.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img22/4640/6a5q.jpg" />
        </li>
        <li>
            <img src="http://imageshack.us/a/img513/4973/h6g3.jpg" />
        </li>
    </ul>
</div>

<强> CSS

.slideshow .big, .slideshow .controls, .slideshow .thumb {
    list-style-type : none;
    position : relative;
    margin : 0;
    padding : 0;
    width : 480px;
}
.slideshow .big li {
    position : absolute;
    top : 0;
    left : 0;
    display : none;
}
.slideshow .big li:first-child {
    display : block;
}
.slideshow .big img, .slideshow .big {
    width : 480px;
    height : 360px;
}
.slideshow .controls {
    position : absolute;
    top : 160px;
}
.slideshow .controls li {
    width : 40px;
    height : 40px;
    background-color : #666;
    opacity : .2;
    color : #ccc;
    float : left;
    font-size : 24px;
    text-align : center;
    line-height : 40px;
    cursor : pointer;
}
.slideshow .controls li:hover {
    opacity : 1;
}
.slideshow .controls .next {
    float : right;
}
.slideshow .thumb img {
    width : 120px;
}
.slideshow .thumb li {
    float : left;
    cursor : pointer;
}
.slideshow .thumb li:hover {
    opacity : .8;
}

<强>的JavaScript

//When we click on thumb img
$('.thumb li', '.slideshow').click(function() {

    var
        //SlideShow
        sshow = $(this).closest('.slideshow'),
        //Big
        big = sshow.find('.big'),
        //thumb
        thumb = sshow.find('.thumb'),
        //Get index
        indx = thumb.find('li').index(this),
        //Current index
        currentIndx = big.find('li').index(big.find('li:visible'));

    //If currentIndx is same as clicked indx don't do anything
    if(currentIndx == indx) {
        return;
    }

    big
        //Fadeout current image
        .find('li:visible').fadeOut().end()
        //Fadein new image
        .find('li:eq(' + indx + ')').fadeIn();
});

//When we click on any li inside controls section
$('.controls li').click(function() {
    var
        //Slideshow
        sshow = $(this).closest('.slideshow'),
        //Increment
        incr = $(this).hasClass('prev') ? -1 : 1,
        //Current Index
        currentIndx = sshow.find('.big li').index(sshow.find('.big li:visible')),
        //Final Index
        finalIndx = currentIndx + incr;

    //Check ranges
    finalIndx = (finalIndx >= 4) ? 0 : ( (finalIndx < 0) ? 3 : finalIndx);

    //Now trigger click event on respective image in nav
    sshow.find('.thumb li:eq(' + finalIndx + ')').trigger('click');
});

我尝试添加注释来解释我的JS代码。

我想，我们可以在不使用任何插件的情况下实现相同目的。

这只是一次尝试。请看看这是否符合您的需求。