滑块没有“滑动”和上一个/下一个按钮问题
我正在尝试实现的滑块/轮播：http://www.paulwelsh.info/jquery-plugins/hero-carousel/
这是我的HTML，CSS＆amp;的JavaScript。
问题：
-
图片不会自行滚动（存在的按钮也不起作用，只是说“prev＆amp;”next“的链接，我甚至不想要那里。
I want custom .png's that should be clickable..< / p> -
图像没有“滑动”。
-
如果你查看.css文件，你会的 请参阅
I tried to add buttons for next & prev, which failed.不确定要放置什么.hero-something-next thingy,我看到了一段我自己可以实现的代码，但它说.slideshow-next in the one，我知道我必须要有不同的东西（姓名），我只是不知道应该说什么。 -
在.js文件的开头还有一行继续放置 “Prev”＆amp;幻灯片中的“下一步”链接，我不想要。我只是想 箭头是切换图像的那些。
-
我不确定那个“缓和”部分是什么，也不是“馅饼”的东西，以及为什么我在我的CSS中有它，如果它是均匀的 必要..（有一个月的网页设计课，没有那么多的经验，保持简单！）
目前的状态链接：imgur.com/e0lh9
小提琴 jsfiddle.net/P2YqR/2
HTML
<div class="hero">
<div class="hero-carousel">
<article>
<img src="images/deadmau5/slide1.jpg" />
</article>
<article>
<img src="images/deadmau5/slide2.jpg" />
</article>
<article>
<img src="images/deadmau5/slide3.jpg" />
</article>
<article>
<img src="images/deadmau5/slide4.jpg" />
</article>
</div>
</div>
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
CSS
.hero {
width: 1366px;
height: 340px; position:absolute;top:270px;
overflow: hidden;
margin-bottom: 48px;margin: 0 auto; border-top:9px solid rgba(51, 51, 51, .30);border-bottom: 9px solid rgba(51, 51, 51, .30); padding: 0 0 12px 0; }
.hero-carousel article {
width: 960px;
margin: 0 auto;
height: 470px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
border-style:solid;border-width:6px;color:#000; position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
a.hero-carousel_next{ WHAT HERE? <----
background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
display: inline-block;
width: 59px; /*width of your img*/
height: 59px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
}
.hero-carousel-nav_prev{ SAME HERE <---?
background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
display: inline-block;
width: 59px; /*width of your img*/
height: 59px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
}
的Javascript
jQuery.fn.heroCarousel = function (a) {
a = jQuery.extend({
animationSpeed: 1000,
navigation: true,
easing: "",
timeout: 5000,
pause: true,
pauseOnNavHover: true,
prevText: "Previous",
nextText: "Next",
css3pieFix: false,
currentClass: "current",
onLoad: function () {},
onStart: function () {},
onComplete: function () {}
}, a);
if (jQuery.browser.msie && parseFloat(jQuery.browser.version) < 7) {
a.animationSpeed = 0
}
return this.each(function () {
var k = jQuery(this),
b = k.children();
currentItem = 1;
childWidth = b.width();
childHeight = b.height();
if (b.length > 2) {
b.each(function (m) {
if (a.itemClass) {
jQuery(this).addClass(a.itemClass)
}
});
b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));
var d = Math.round(childWidth * k.children().length),
l = "-" + Math.round(childWidth + Math.round(childWidth / 2)) + "px";
k.addClass("hero-carousel-container").css({
position: "relative",
overflow: "hidden",
left: "50%",
top: 0,
"margin-left": l,
height: childHeight,
width: d
});
k.before('<ul class="hero-carousel-nav"><li class="prev"><a href="#">' + a.prevText + '</a></li><li class="next"><a href="#">' + a.nextText + "</a></li></ul>");
var e = k.prev(".hero-carousel-nav"),
h;
if (a.timeout > 0) {
var j = false;
if (a.pause) {
k.hover(function () {
j = true
}, function () {
j = false
})
}
if (a.pauseOnNavHover) {
e.hover(function () {
j = true
}, function () {
j = false
})
}
function c() {
if (!j) {
e.find(".next a").trigger("click")
}
}
h = window.setInterval(c, a.timeout)
}
e.find("a").data("disabled", false).click(function (p) {
p.preventDefault();
var m = jQuery(this),
n = m.parent().hasClass("prev"),
o = k.children();
if (m.data("disabled") === false) {
a.onStart(k, e, o.eq(currentItem), a);
if (n) {
f(o.filter(":last"), "previous")
} else {
f(o.filter(":first"), "next")
}
m.data("disabled", true);
setTimeout(function () {
m.data("disabled", false)
}, a.animationSpeed + 200);
if (a.timeout > 0) {
window.clearInterval(h);
h = window.setInterval(c, a.timeout)
}
}
});
function f(m, q) {
var o = parseFloat(k.position().left),
n = parseFloat(k.css("margin-left"));
if (q === "previous") {
m.before(m.clone().addClass("carousel-clone"));
k.prepend(m);
var p = Math.round(n - childWidth);
var r = "+="
} else {
m.after(m.clone().addClass("carousel-clone"));
k.append(m);
var p = l;
var r = "-="
}
if (a.css3pieFix) {
g(jQuery(".carousel-clone"))
}
k.css({
left: o,
width: Math.round(d + childWidth),
"margin-left": p
}).animate({
left: r + childWidth
}, a.animationSpeed, a.easing, function () {
k.css({
left: "50%",
width: d,
"margin-left": n
});
jQuery(".carousel-clone").remove();
i()
})
}
function g(n) {
var m = n.attr("_pieId");
if (m) {
n.attr("_pieId", m + "_cloned")
}
n.find("*[_pieId]").each(function (o, p) {
var q = $(p).attr("_pieId");
$(p).attr("_pieId", q + "_cloned")
})
}
function i() {
var m = k.children();
m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);
a.onComplete(k, k.prev(".hero-carousel-nav"), m.eq(currentItem), a)
}
if (jQuery.browser.msie) {
e.find("a").attr("hideFocus", "true")
}
a.onLoad(k, e, k.children().eq(currentItem), a)
}
})
};
请在提供答案时，请等几分钟，直到我回复确认它有效！
结果应类似于：http://www.deadmau5.com
更新
.hero-carousel-nav li.next a {
background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
display: inline-block;
width: 100px; /*width of your img*/
height: 120px; /*height of your img*/
font-size: 0px;
right: -15px; /*this is better than 1px*/
bottom: 90px;
}
.hero-carousel-nav li.prev a {
background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
display: inline-block;
width: 100px; /*width of your img*/
height: 120px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
left: -50px;
bottom: 90px;
}
更新2
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: -50px;
right: auto;
bottom: 100px;
}
.hero-carousel-nav li.next {
right: -30px;
left: auto;
bottom: 100px;
}
.hero-carousel-nav li a {
background: none repeat scroll 0 0 #D21034;
color: #FFFFFF;
display: block;
float: left;
}
.hero-carousel-nav li.next a {
background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
display: inline-block;
width: 115px; /*width of your img*/
height: 100px; /*height of your img*/
font-size: 0px;
right: -15px; /*this is better than 1px*/
bottom: 100px;
overflow:hidden;
}
.hero-carousel-nav li.prev a {
background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
display: inline-block;
width: 115px; /*width of your img*/
height: 100px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
left: -50px;
bottom: 100px;
overflow:hidden;
}
2 个答案:
答案 0 :(得分：1)
略微更新你的小提琴。在此处查看完整结果http://jsfiddle.net/johnsmith123/P2YqR/11/
首先添加了jsfiddle和easyng lib（参见资源部分中的小提琴） 然后搬了
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
脚本setion。
更新
图片：http://jsfiddle.net/johnsmith123/P2YqR/11/
CSS：
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: none repeat scroll 0 0 #D21034;
border: medium none;
border-radius: 20px 20px 20px 20px;
color: #FFFFFF;
display: block;
float: left;
outline: medium none;
padding: 5px 20px;
}
.hero-carousel-nav li.next a{
background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/css/../images/large-arrow-right.png') no-repeat;
display: inline-block;
width: 59px; /*width of your img*/
height: 89px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
}
.hero-carousel-nav li.prev a{
background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/css/../images/large-arrow-left.png') no-repeat;
display: inline-block;
width: 59px; /*width of your img*/
height: 89px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
}
答案 1 :(得分：1)
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li a {
background: none repeat scroll 0 0 #D21034;
color: #FFFFFF;
display: block;
float: left;
}
.hero-carousel-nav li.next a {
background: url('../images/deadmau5/large-arrow-right.png') no-repeat;
display: inline-block;
width: 82px; /*width of your img*/
height: 82px; /*height of your img*/
font-size: 0px;
right: -15px; /*this is better than 1px*/
bottom: 100px;
overflow:hidden;
}
.hero-carousel-nav li.prev a {
background: url('../images/deadmau5/large-arrow-left.png') no-repeat;
display: inline-block;
width: 82px; /*width of your img*/
height: 82px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
left: -50px;
bottom: 100px;
overflow:hidden;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？