我正在尝试将www.basic-slider.com的jQuery插件实现到图库中。该插件目前所做的是在内部的图像之间创建转换。 li> HTML中的标记并在底部生成框，其中的数值对应于每个图像的顺序。
我希望生成的框显示每个图像的缩略图而不是数值。我试过调试jQuery代码没有任何运气，因此我在这里寻求帮助。
这就是目前的样子以及我想要实现的目标： IMAGE
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);
答案 0 :(得分：1)
<强> 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'><</li>
<li class='next'>></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代码。
我想，我们可以在不使用任何插件的情况下实现相同目的。
这只是一次尝试。请看看这是否符合您的需求。