将 jquery 导航按钮放在滑块上 [英] Placing jquery navigation buttons over slider
查看：16
javascript
jquery
html
css
slider
本文介绍了将 jquery 导航按钮放在滑块上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
谢谢大佬，
我花了一些时间，但这是代码.我希望这行得通.我以前从未使用过这个论坛.
我的代码:
<html><div 类="容器"><div id="幻灯片"><img src="_images/aqw.png" data-title="ALLIANCE QUARTETT WIEN:"><img src="_images/aqw2.jpg"><img src="_images/eme.png"><img src="_images/eme2.jpg"><img src="_images/zen.png"><img src="_images/zen2.png"><img src="_images/cts.png"><img src="_images/cts2.jpg"><img src="_images/ag2.png"><img src="_images/ag.jpg"></div></div><!-- 需要结束 SlidesJS:开始幻灯片 --><!-- 需要 SlidesJS:链接到 jQuery --><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><!-- 需要结束 SlidesJS --><!-- 需要 SlidesJS:链接到 jquery.slides.js --><script src="js/jquery.slides.min.js"></script><!-- 需要结束 SlidesJS --><!-- 需要 SlidesJS:使用准备好的 jQuery 文档初始化 SlidesJS --><脚本>$(函数(){$('#slides').slidesjs({宽度:1000，身高:650，玩: {活跃:真实，自动:是的，间隔:5000，交换:真}});});</脚本><!-- 需要结束 SlidesJS --></身体></html>CSS
#slides {显示:无}#slides .slidesjs-导航 {边距:10px 0 0 10px；}a.slidesjs-下一个，a.slidesjs-previous,a.slidesjs-播放，a.slidesjs-停止{背景图像:url(_images/btns-next-prev.png)；背景重复:不重复；显示:块；宽度:12px；高度:18px；溢出:隐藏；文本缩进:-9999px；向左飘浮;边距右:5px；}a.slidesjs-next {边距右:10px；背景位置:-12px 0；}a:hover.slidesjs-next {背景位置:-12px -18px；}a.slidesjs-previous {背景位置:0 0；}a:hover.slidesjs-previous {背景位置:0 -18px；}a.slidesjs-play {宽度:15px；背景位置:-25px 0；}a:hover.slidesjs-play {背景位置:-25px -18px；}a.slidesjs-停止{宽度:18px；背景位置:-41px 0；}a:hover.slidesjs-stop {背景位置:-41px -18px；}.slidesjs-分页 {边距:7px 0 0；浮动:对；列表样式:无；}.slidesjs-分页李{向左飘浮;边距:0 1px；}.slidesjs-pagination li a {显示:块；宽度:13px；高度:0；填充顶部:13px；背景图片:url(img/pagination.png)；背景位置:0 0；向左飘浮;溢出:隐藏；}.slidesjs-pagination li a.active,.slidesjs-pagination li a:hover.active {背景位置:0 -13px}.slidesjs-pagination li a:hover {背景位置:0 -26px}#幻灯片一个:链接，#slides a: 已访问 {颜色:#333}#slides a:悬停，#幻灯片一个:活动{颜色:#9e2020}.navbar {溢出:隐藏}JS
(function () {(函数(a，b，c){变量 d, e, f;返回 f = "slidesjs", e = {宽度:940，身高:528，开始:1，导航: {活跃:！0，效果:幻灯片"},分页:{活跃:！0，效果:幻灯片"},玩: {活跃:！1，效果:幻灯片"，间隔:5e3，自动:！1，交换:！0，pauseOnHover: !1,重启延迟:2500},影响: {滑动: {速度:500},褪色: {速度:300，淡入淡出:！0}},打回来: {加载:函数(){}，开始:函数(){}，完成:函数(){}}}, d = 函数 () {函数 b(b, c) {this.element = b, this.options = a.extend(!0, {}, e, c), this._defaults = e, this._name = f, this.init()}返回 b}(), d.prototype.init = 函数 () {var c, d, e, f, g, h, i = 这个；return c = a(this.element), this.data = a.data(this), a.data(this, "animating", !1), a.data(this, "total", c.children().not(".slidesjs-navigation", c).length), a.data(this, "current", this.options.start - 1), a.data(this, "vendorPrefix", this._getVendorPrefix()), "undefined" != typeof TouchEvent &&(a.data(this, "touch", !0), this.options.effect.slide.speed = this.options.effect.slide.speed/2), c.css({溢出:隐藏"}), c.slidesContainer = c.children().not(".slidesjs-navigation", c).wrapAll("<div class='slidesjs-container'>", c).parent().css({溢出:隐藏"，职位:亲戚"}), a(".slidesjs-container", c).wrapInner("-1?b : this.data.current, a(".active", c).removeClass("active"), a("li:eq(" + d + ") a", c).addClass("active")}, d.prototype.update = function () {变量 b, c, d;return b = a(this.element), this.data = a.data(this), a(".slidesjs-control", b).children(":not(:eq(" + this.data.current +"))").css({显示:无"，左:0，z索引:0}), d = b.width(), c = this.options.height/this.options.width * d, this.options.width = d, this.options.height = c, a(".slidesjs-control, .slidesjs-容器", b).css({宽度:d，高度:c})}, d.prototype.next = 函数 (b) {变量 c;return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "next"), void 0 === b &&(b = this.options.navigation.effect), "fade" === b ?this._fade() : this._slide()}, d.prototype.previous = 函数 (b) {变量 c;return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "previous"), void 0 === b &&(b = this.options.navigation.effect), "fade" === b ?this._fade() : this._slide()}, d.prototype.goto = 函数 (b) {变量 c, d;if (c = a(this.element), this.data = a.data(this), void 0 === d && (d = this.options.pagination.effect), b > this.data.total ? b = this.data.total : 1 > b && (b = 1), "number" == typeof b) return "fade" === d ?this._fade(b) : this._slide(b);if ("string" == typeof b) {if ("first" === b) return "fade" === d ?this._fade(0) : this._slide(0);if ("last" === b) return "fade" === d ?this._fade(this.data.total) : this._slide(this.data.total)}}, d.prototype._setuptouch = function () {变量 b, c, d, e;返回 b = a(this.element), this.data = a.data(this), e = a(".slidesjs-control", b), c = this.data.current + 1, d = this.data.current - 1, 0 >d&&(d = this.data.total - 1), c >this.data.total - 1 &&(c = 0), e.children(":eq(" + c + ")").css({显示:块"，左:this.options.width}), e.children(":eq(" + d + ")").css({显示:块"，左:-this.options.width})}, d.prototype._touchstart = function (b) {变量 c, d;返回 c = a(this.element), this.data = a.data(this), d = b.originalEvent.touches[0], this._setuptouch(), a.data(this, "touchtimer", Number(新日期))，a.data(this，touchstartx"，d.pageX)，a.data(this，touchstarty"，d.pageY)，b.stopPropagation()}, d.prototype._touchend = 函数 (b) {var c、d、e、f、g、h、i、j = 这个；return c = a(this.element), this.data = a.data(this), h = b.originalEvent.touches[0], f = a(".slidesjs-control", c), f.position().left >.5 * this.options.width ||f.position().left >.1 * this.options.width &&250 >数字(新日期) - this.data.touchtimer ?(a.data(this, "direction", "previous"), this._slide()) : f.position().left <-(.5 * this.options.width) ||f.position().left <-(.1 * this.options.width) &&250 >数字(新日期) - this.data.touchtimer ?(a.data(this, "direction", "next"), this._slide()) : (e = this.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g =e + "TransitionTimingFunction", f[0].style[i] = "translateX(0px)", f[0].style[d] = .85 * this.options.effect.slide.speed + "ms"), f.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {返回 e = j.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "", f[0].style[d] = "", f[0].style[g] = ""}), b.stopPropagation()}, d.prototype._touchmove = 函数 (b) {变量 c, d, e, f, g;return c = a(this.element), this.data = a.data(this), f = b.originalEvent.touches[0], d = this.data.vendorPrefix, e = a(".slidesjs-control", c), g = d + "变换", a.data(this, "scrolling", Math.abs(f.pageX - this.data.touchstartx) < Math.abs(f.pageY - this.data.touchstarty)), this.data.animating ||this.data.scrolling ||(b.preventDefault(), this._setuptouch(), e[0].style[g] = "translateX(" + (f.pageX - this.data.touchstartx) + "px)"), b.stopPropagation()}, d.prototype.play = 函数 (b) {var c, d, e, f = 这个；返回 c = a(this.element), this.data = a.data(this), !this.data.playInterval &&(b && (d = this.data.current, this.data.direction = "next", "fade" === this.options.play.effect ? this._fade() : this._slide()), a.data(this, "playInterval", setInterval(function () {返回 d = f.data.current, f.data.direction = "next", "fade" === f.options.play.effect ?f._fade() : f._slide()}, this.options.play.interval)), e = a(".slidesjs-container", c), this.options.play.pauseOnHover &&(e.unbind(), e.bind("mouseenter", function () {返回 f.stop()}), e.bind("mouseleave", function () {返回 f.options.play.restartDelay ?a.data(f, "restartDelay", setTimeout(function () {返回 f.play(!0)}, f.options.play.restartDelay)) : f.play()})), a.data(this, "playing", !0), a(".slidesjs-play", c).addClass("slidesjs-playing"), this.options.play.swap) ?(a(.slidesjs-play"，c).hide()，a(.slidesjs-stop"，c).show()):无效0}, d.prototype.stop = 函数 (b) {变量 c;return c = a(this.element), this.data = a.data(this), clearInterval(this.data.playInterval), this.options.play.pauseOnHover &&b&&a(".slidesjs-container", c).unbind(), a.data(this, "playInterval", null), a.data(this, "playing", !1), a(".slidesjs-play", c).removeClass("slidesjs-playing"), this.options.play.swap ?(a(.slidesjs-stop"，c).hide()，a(.slidesjs-play"，c).show()):无效0}, d.prototype._slide = 函数 (b) {变量 c、d、e、f、g、h、i、j、k、l、m = 这个；返回 c = a(this.element), this.data = a.data(this), this.data.animating ||b === this.data.current + 1 ?void 0 : (a.data(this, "animating", !0), d = this.data.current, b > -1 ? (b -= 1, l = b > d ? 1 : -1,e = b > d ? -this.options.width : this.options.width, g = b) : (l = "next" === this.data.direction ? 1 : -1, e = "next"=== this.data.direction ? -this.options.width : this.options.width, g = d + l), -1 === g && (g = this.data.total - 1), g === this.data.total && (g = 0), this._setActive(g), i = a(".slidesjs-control", c), b > -1 &&i.children(":not(:eq(" + d + "))").css({显示:无"，左:0，z索引:0}), i.children(":eq(" + g + ")").css({显示:块"，左:l * this.options.width，z索引:10}), this.options.callback.start(d + 1), this.data.vendorPrefix ?(h = this.data.vendorPrefix, k = h + "Transform", f = h + "TransitionDuration", j = h + "TransitionTimingFunction", i[0].style[k] = "translateX(" + e +"px)", i[0].style[f] = this.options.effect.slide.speed + "ms", i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {返回 i[0].style[k] = "", i[0].style[f] = "", i.children(":eq(" + g + ")").css({左:0}), i.children(":eq(" + d + ")").css({显示:无"，左:0，z索引:0}), a.data(m, "current", g), a.data(m, "animating", !1), i.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd"), i.children(":not(:eq(" + g + "))").css({显示:无"，左:0，z索引:0}), m.data.touch &&m._setuptouch(), m.options.callback.complete(g + 1)})) : i.stop().animate({左:e}, this.options.effect.slide.speed, function () {返回 i.css({左:0}), i.children(":eq(" + g + ")").css({左:0}), i.children(":eq(" + d + ")").css({显示:无"，左:0，z索引:0}, a.data(m, "current", g), a.data(m, "animating", !1), m.options.callback.complete(g + 1))}))}, d.prototype._fade = function (b) {var c, d, e, f, g, h = 这个；返回 c = a(this.element), this.data = a.data(this), this.data.animating ||b === this.data.current + 1 ?void 0 : (a.data(this, "animating", !0), d = this.data.current, b ? (b -= 1, g = b > d ? 1 : -1, e = b): (g = "next" === this.data.direction ? 1 : -1, e = d + g), -1 === e && (e = this.data.total - 1),e === this.data.total && (e = 0), this._setActive(e), f = a(".slidesjs-control", c), f.children(":eq(" +e + ")").css({显示:无"，左:0，z索引:10}), this.options.callback.start(d + 1), this.options.effect.fade.crossfade ?(f.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed), f.children(":eq(" + e+ ")").stop().fadeIn(this.options.effect.fade.speed, function () {返回 f.children(":eq(" + e + ")").css({z索引:0}), a.data(h, "动画", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)})) : f.children(":eq(" + d + ")").stop().fadeOut(this.options.effect.fade.speed, function () {return f.children(":eq(" + e + ")").stop().fadeIn(h.options.effect.fade.speed, function () {返回 f.children(":eq(" + e + ")").css({z索引:10})}), a.data(h, "动画", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)}))}, d.prototype._getVendorPrefix = function () {变量 a, b, d, e, f;for (a = c.body || c.documentElement, d = a.style, e = "transition", f = ["Moz", "Webkit", "Khtml", "O", "ms"], e= e.charAt(0).toUpperCase() + e.substr(1), b = 0; f.length > b;) {if ("string" == typeof d[f[b] + e]) return f[b];b++}返回！1}, a.fn[f] = 函数 (b) {返回 this.each(function () {返回 a.data(this, "plugin_" + f) ?无效 0 : a.data(this, "plugin_" + f, new d(this, b))})}})(jQuery, 窗口, 文档)}).call(this);我是网络新手，对使用 javascript 毫无头绪.我正在尝试将下面链接的导航按钮(下一个、上一个和播放/暂停)放在图像上，但我无法弄清楚！！如果有人可以提供帮助，我将不胜感激?另外，有没有办法让它随着宽度和高度的变化而缩放?
http://www.slidesjs.com/examples/standard/
非常感谢！
解决方案 将此添加到您的样式表中
#slides .slidesjs-previous {位置:绝对；最高:45%；左:10%；z指数:999；}#slides .slidesjs-next{位置:绝对；最高:45%；对:10%；z指数:999；}
Thanks man,
It took me a while but here's the code. I hope this works. I've never used this forum before.
My Code:
<html>
<div class="container">
<div id="slides">
<img src="_images/aqw.png" data-title="ALLIANCE QUARTETT WIEN: ">
<img src="_images/aqw2.jpg">
<img src="_images/eme.png">
<img src="_images/eme2.jpg">
<img src="_images/zen.png">
<img src="_images/zen2.png">
<img src="_images/cts.png">
<img src="_images/cts2.jpg">
<img src="_images/ag2.png">
<img src="_images/ag.jpg">
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 1000,
height: 650,
play: {
active: true,
auto: true,
interval: 5000,
swap: true
}
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>
CSS
#slides {
display: none
}
#slides .slidesjs-navigation {
margin:10px 0 0 10px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image:url(_images/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
JS
(function () {
(function (a, b, c) {
var d, e, f;
return f = "slidesjs", e = {
width: 940,
height: 528,
start: 1,
navigation: {
active: !0,
effect: "slide"
},
pagination: {
active: !0,
effect: "slide"
},
play: {
active: !1,
effect: "slide",
interval: 5e3,
auto: !1,
swap: !0,
pauseOnHover: !1,
restartDelay: 2500
},
effect: {
slide: {
speed: 500
},
fade: {
speed: 300,
crossfade: !0
}
},
callback: {
loaded: function () {},
start: function () {},
complete: function () {}
}
}, d = function () {
function b(b, c) {
this.element = b, this.options = a.extend(!0, {}, e, c), this._defaults = e, this._name = f, this.init()
}
return b
}(), d.prototype.init = function () {
var c, d, e, f, g, h, i = this;
return c = a(this.element), this.data = a.data(this), a.data(this, "animating", !1), a.data(this, "total", c.children().not(".slidesjs-navigation", c).length), a.data(this, "current", this.options.start - 1), a.data(this, "vendorPrefix", this._getVendorPrefix()), "undefined" != typeof TouchEvent && (a.data(this, "touch", !0), this.options.effect.slide.speed = this.options.effect.slide.speed / 2), c.css({
overflow: "hidden"
}), c.slidesContainer = c.children().not(".slidesjs-navigation", c).wrapAll("<div class='slidesjs-container'>", c).parent().css({
overflow: "hidden",
position: "relative"
}), a(".slidesjs-container", c).wrapInner("<div class='slidesjs-control'>", c).children(), a(".slidesjs-control", c).css({
position: "relative",
left: 0
}), a(".slidesjs-control", c).children().addClass("slidesjs-slide").css({
position: "absolute",
top: 0,
left: 0,
width: "100%",
zIndex: 0,
display: "none",
webkitBackfaceVisibility: "hidden"
}), a.each(a(".slidesjs-control", c).children(), function (b) {
var c;
return c = a(this), c.attr("slidesjs-index", b)
}), this.data.touch && (a(".slidesjs-control", c).on("touchstart", function (a) {
return i._touchstart(a)
}), a(".slidesjs-control", c).on("touchmove", function (a) {
return i._touchmove(a)
}), a(".slidesjs-control", c).on("touchend", function (a) {
return i._touchend(a)
})), c.fadeIn(0), this.update(), this.data.touch && this._setuptouch(), a(".slidesjs-control", c).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function () {
return a(this).css({
zIndex: 10
})
}), this.options.navigation.active && (g = a("<a>", {
"class": "slidesjs-previous slidesjs-navigation",
href: "#",
title: "Previous",
text: "Previous"
}).appendTo(c), d = a("<a>", {
"class": "slidesjs-next slidesjs-navigation",
href: "#",
title: "Next",
text: "Next"
}).appendTo(c)), a(".slidesjs-next", c).click(function (a) {
return a.preventDefault(), i.stop(!0), i.next(i.options.navigation.effect)
}), a(".slidesjs-previous", c).click(function (a) {
return a.preventDefault(), i.stop(!0), i.previous(i.options.navigation.effect)
}), this.options.play.active && (f = a("<a>", {
"class": "slidesjs-play slidesjs-navigation",
href: "#",
title: "Play",
text: "Play"
}).appendTo(c), h = a("<a>", {
"class": "slidesjs-stop slidesjs-navigation",
href: "#",
title: "Stop",
text: "Stop"
}).appendTo(c), f.click(function (a) {
return a.preventDefault(), i.play(!0)
}), h.click(function (a) {
return a.preventDefault(), i.stop(!0)
}), this.options.play.swap && h.css({
display: "none"
})), this.options.pagination.active && (e = a("<ul>", {
"class": "slidesjs-pagination"
}).appendTo(c), a.each(Array(this.data.total), function (b) {
var c, d;
return c = a("<li>", {
"class": "slidesjs-pagination-item"
}).appendTo(e), d = a("<a>", {
href: "#",
"data-slidesjs-item": b,
html: b + 1
}).appendTo(c), d.click(function (b) {
return b.preventDefault(), i.stop(!0), i.goto(1 * a(b.currentTarget).attr("data-slidesjs-item") + 1)
})
})), a(b).bind("resize", function () {
return i.update()
}), this._setActive(), this.options.play.auto && this.play(), this.options.callback.loaded(this.options.start)
}, d.prototype._setActive = function (b) {
var c, d;
return c = a(this.element), this.data = a.data(this), d = b > -1 ? b : this.data.current, a(".active", c).removeClass("active"), a("li:eq(" + d + ") a", c).addClass("active")
}, d.prototype.update = function () {
var b, c, d;
return b = a(this.element), this.data = a.data(this), a(".slidesjs-control", b).children(":not(:eq(" + this.data.current + "))").css({
display: "none",
left: 0,
zIndex: 0
}), d = b.width(), c = this.options.height / this.options.width * d, this.options.width = d, this.options.height = c, a(".slidesjs-control, .slidesjs-container", b).css({
width: d,
height: c
})
}, d.prototype.next = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "next"), void 0 === b && (b = this.options.navigation.effect), "fade" === b ? this._fade() : this._slide()
}, d.prototype.previous = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "previous"), void 0 === b && (b = this.options.navigation.effect), "fade" === b ? this._fade() : this._slide()
}, d.prototype.goto = function (b) {
var c, d;
if (c = a(this.element), this.data = a.data(this), void 0 === d && (d = this.options.pagination.effect), b > this.data.total ? b = this.data.total : 1 > b && (b = 1), "number" == typeof b) return "fade" === d ? this._fade(b) : this._slide(b);
if ("string" == typeof b) {
if ("first" === b) return "fade" === d ? this._fade(0) : this._slide(0);
if ("last" === b) return "fade" === d ? this._fade(this.data.total) : this._slide(this.data.total)
}
}, d.prototype._setuptouch = function () {
var b, c, d, e;
return b = a(this.element), this.data = a.data(this), e = a(".slidesjs-control", b), c = this.data.current + 1, d = this.data.current - 1, 0 > d && (d = this.data.total - 1), c > this.data.total - 1 && (c = 0), e.children(":eq(" + c + ")").css({
display: "block",
left: this.options.width
}), e.children(":eq(" + d + ")").css({
display: "block",
left: -this.options.width
})
}, d.prototype._touchstart = function (b) {
var c, d;
return c = a(this.element), this.data = a.data(this), d = b.originalEvent.touches[0], this._setuptouch(), a.data(this, "touchtimer", Number(new Date)), a.data(this, "touchstartx", d.pageX), a.data(this, "touchstarty", d.pageY), b.stopPropagation()
}, d.prototype._touchend = function (b) {
var c, d, e, f, g, h, i, j = this;
return c = a(this.element), this.data = a.data(this), h = b.originalEvent.touches[0], f = a(".slidesjs-control", c), f.position().left > .5 * this.options.width || f.position().left > .1 * this.options.width && 250 > Number(new Date) - this.data.touchtimer ? (a.data(this, "direction", "previous"), this._slide()) : f.position().left < -(.5 * this.options.width) || f.position().left < -(.1 * this.options.width) && 250 > Number(new Date) - this.data.touchtimer ? (a.data(this, "direction", "next"), this._slide()) : (e = this.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "translateX(0px)", f[0].style[d] = .85 * this.options.effect.slide.speed + "ms"), f.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
return e = j.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "", f[0].style[d] = "", f[0].style[g] = ""
}), b.stopPropagation()
}, d.prototype._touchmove = function (b) {
var c, d, e, f, g;
return c = a(this.element), this.data = a.data(this), f = b.originalEvent.touches[0], d = this.data.vendorPrefix, e = a(".slidesjs-control", c), g = d + "Transform", a.data(this, "scrolling", Math.abs(f.pageX - this.data.touchstartx) < Math.abs(f.pageY - this.data.touchstarty)), this.data.animating || this.data.scrolling || (b.preventDefault(), this._setuptouch(), e[0].style[g] = "translateX(" + (f.pageX - this.data.touchstartx) + "px)"), b.stopPropagation()
}, d.prototype.play = function (b) {
var c, d, e, f = this;
return c = a(this.element), this.data = a.data(this), !this.data.playInterval && (b && (d = this.data.current, this.data.direction = "next", "fade" === this.options.play.effect ? this._fade() : this._slide()), a.data(this, "playInterval", setInterval(function () {
return d = f.data.current, f.data.direction = "next", "fade" === f.options.play.effect ? f._fade() : f._slide()
}, this.options.play.interval)), e = a(".slidesjs-container", c), this.options.play.pauseOnHover && (e.unbind(), e.bind("mouseenter", function () {
return f.stop()
}), e.bind("mouseleave", function () {
return f.options.play.restartDelay ? a.data(f, "restartDelay", setTimeout(function () {
return f.play(!0)
}, f.options.play.restartDelay)) : f.play()
})), a.data(this, "playing", !0), a(".slidesjs-play", c).addClass("slidesjs-playing"), this.options.play.swap) ? (a(".slidesjs-play", c).hide(), a(".slidesjs-stop", c).show()) : void 0
}, d.prototype.stop = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), clearInterval(this.data.playInterval), this.options.play.pauseOnHover && b && a(".slidesjs-container", c).unbind(), a.data(this, "playInterval", null), a.data(this, "playing", !1), a(".slidesjs-play", c).removeClass("slidesjs-playing"), this.options.play.swap ? (a(".slidesjs-stop", c).hide(), a(".slidesjs-play", c).show()) : void 0
}, d.prototype._slide = function (b) {
var c, d, e, f, g, h, i, j, k, l, m = this;
return c = a(this.element), this.data = a.data(this), this.data.animating || b === this.data.current + 1 ? void 0 : (a.data(this, "animating", !0), d = this.data.current, b > -1 ? (b -= 1, l = b > d ? 1 : -1, e = b > d ? -this.options.width : this.options.width, g = b) : (l = "next" === this.data.direction ? 1 : -1, e = "next" === this.data.direction ? -this.options.width : this.options.width, g = d + l), -1 === g && (g = this.data.total - 1), g === this.data.total && (g = 0), this._setActive(g), i = a(".slidesjs-control", c), b > -1 && i.children(":not(:eq(" + d + "))").css({
display: "none",
left: 0,
zIndex: 0
}), i.children(":eq(" + g + ")").css({
display: "block",
left: l * this.options.width,
zIndex: 10
}), this.options.callback.start(d + 1), this.data.vendorPrefix ? (h = this.data.vendorPrefix, k = h + "Transform", f = h + "TransitionDuration", j = h + "TransitionTimingFunction", i[0].style[k] = "translateX(" + e + "px)", i[0].style[f] = this.options.effect.slide.speed + "ms", i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
return i[0].style[k] = "", i[0].style[f] = "", i.children(":eq(" + g + ")").css({
left: 0
}), i.children(":eq(" + d + ")").css({
display: "none",
left: 0,
zIndex: 0
}), a.data(m, "current", g), a.data(m, "animating", !1), i.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd"), i.children(":not(:eq(" + g + "))").css({
display: "none",
left: 0,
zIndex: 0
}), m.data.touch && m._setuptouch(), m.options.callback.complete(g + 1)
})) : i.stop().animate({
left: e
}, this.options.effect.slide.speed, function () {
return i.css({
left: 0
}), i.children(":eq(" + g + ")").css({
left: 0
}), i.children(":eq(" + d + ")").css({
display: "none",
left: 0,
zIndex: 0
}, a.data(m, "current", g), a.data(m, "animating", !1), m.options.callback.complete(g + 1))
}))
}, d.prototype._fade = function (b) {
var c, d, e, f, g, h = this;
return c = a(this.element), this.data = a.data(this), this.data.animating || b === this.data.current + 1 ? void 0 : (a.data(this, "animating", !0), d = this.data.current, b ? (b -= 1, g = b > d ? 1 : -1, e = b) : (g = "next" === this.data.direction ? 1 : -1, e = d + g), -1 === e && (e = this.data.total - 1), e === this.data.total && (e = 0), this._setActive(e), f = a(".slidesjs-control", c), f.children(":eq(" + e + ")").css({
display: "none",
left: 0,
zIndex: 10
}), this.options.callback.start(d + 1), this.options.effect.fade.crossfade ? (f.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed), f.children(":eq(" + e + ")").stop().fadeIn(this.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").css({
zIndex: 0
}), a.data(h, "animating", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)
})) : f.children(":eq(" + d + ")").stop().fadeOut(this.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").stop().fadeIn(h.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").css({
zIndex: 10
})
}), a.data(h, "animating", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)
}))
}, d.prototype._getVendorPrefix = function () {
var a, b, d, e, f;
for (a = c.body || c.documentElement, d = a.style, e = "transition", f = ["Moz", "Webkit", "Khtml", "O", "ms"], e = e.charAt(0).toUpperCase() + e.substr(1), b = 0; f.length > b;) {
if ("string" == typeof d[f[b] + e]) return f[b];
b++
}
return !1
}, a.fn[f] = function (b) {
return this.each(function () {
return a.data(this, "plugin_" + f) ? void 0 : a.data(this, "plugin_" + f, new d(this, b))
})
}
})(jQuery, window, document)
}).call(this);
I'm new to web and clueless using javascript. I'm trying to place a the navigation buttons (next, previous and play/pause) of the link below over the image but I can't figure it out!! I would really appreciate if someone could help? Also, is there a way on that same code of making it scale as the width and height change?
http://www.slidesjs.com/examples/standard/
Thanks very much!
解决方案 Add this to your Stylesheet
#slides .slidesjs-previous {
position: absolute;
top: 45%;
left: 10%;
z-index:999;
}
#slides .slidesjs-next{
position: absolute;
top: 45%;
right: 10%;
z-index:999;
}
这篇关于将 jquery 导航按钮放在滑块上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
- 将jquery导航按钮放在滑块上;
- 用滑块提交表单后，将焦点放在滑块上;
- 将关闭按钮放在QTabWidget上;
- 将单选按钮放在图像上;
- 将图像放在旋转滑块上方;
- jQuery的滑块旁边/ previous按钮;
- 如何将关闭按钮放在jQuery工具提示;
- 使用 JQuery UI 将单选按钮转换为滑块元素;
- 使用JQuery UI将单选按钮转换为滑块元素;
- 按钮的z-index jquery滑块;
- 如何将符号光标放在按钮上;
- 如何将图像放在按钮文本上;
- DatePicker将文本放在按钮上而不是图像上;
- 无法将jquery ui帮助器放在droppable上;
- jQuery Mobile-内容导航折叠在人像上的按钮上;
- 如何使用引导程序将链接放在按钮上?;
- 如何将品牌和导航栏放在不同的行上?;
- 如何将鼠标放在图像上的原始按钮，鼠标离开按钮？;
- Android按钮将图像放在中央，文本放在底部;
- 将 datepicker() 放在动态创建的元素上 - JQuery/JQueryUI;
- 将datepicker（）放在动态创建的元素上--JQuery / JQueryUI;
- jQuery表单滑块（输入滑块）;
- jquery 表单滑块(输入滑块);
- 触摸设备上的 jQuery UI 滑块;
- Jquery拖放在html画布上;
前端开发最新文章
- 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
- 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
- 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
- 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
- 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
- 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
- 此请求已被阻止;内容必须通过HTTPS提供;
- 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
- 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
- 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
