滑块不“滑动”和上一个/下一个按钮问题答案

【问题标题】：Slider not "sliding" & prev/next buttons issue滑块不“滑动”和上一个/下一个按钮问题
【发布时间】：2012-12-08 21:01:59
【问题描述】：

我要实现的滑块/轮播是这样的：http://www.paulwelsh.info/jquery-plugins/hero-carousel/

这是我的 HTML、CSS 和 Javascript。

问题：

图像不会自行滚动（现有的按钮也不起作用，只是一个显示“上一个”和“下一个”的链接，我什至不想要那里。I want custom .png's that should be clickable..
图像没有“滑动”。
如果您查看 .css 文件，您会发现见I tried to add buttons for next & prev, which failed. 不知道该写什么.hero-something-next thingy, 我看到了一段我可以自己实现的代码，但它说 .slideshow-next 在那段代码中，我知道我必须有一些不同的东西（名称方面)，我只是不知道它应该说什么。
.js 文件开头还有一行一直放幻灯片中的“上一个”和“下一个”链接，我不想要。我只是想箭头是切换图像的箭头。
我不确定“宽松”部分是什么，也不确定“馅饼”是什么，以及为什么我的 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;

}

【问题讨论】：

缓动是指每张幻灯片的运动模式，例如线性缓动意味着滑块将以恒定速度移动。 PIE 是 Progressive Internet Explorer 的首字母缩写，它是一个 polyfill，旨在为 IE 添加 CSS3 功能
检查一下jsfiddle.net/au7jh

标签： javascript jquery html css slider

【解决方案1】：

稍微更新了你的小提琴。在此处查看完整结果http://jsfiddle.net/johnsmith123/P2YqR/11/

首先添加了 jsfiddle 和 easyng 库（参见 fiddle 的资源部分）然后搬家了

$(document).ready(function(){
    $('.hero-carousel').heroCarousel({
        easing: 'easeOutExpo',
        css3pieFix: true
    });
});

到脚本设置。

更新

图片：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*/
}

【讨论】：

我还是不能让它工作？我用现有的.css 换掉了，我还需要做什么？我是否也应该抓住你放置的资源并用它们替换我的资源？ “下一个”和“上一个”仍然存在。我知道它在 .js 的开头就确定了，但我不想改变太多，因为我没有经验并且把整个事情搞砸了。我基本上希望它们消失并能够放置我自己的 .png应该是可点击的（箭头）。
基本上到目前为止，我可以单击上一个和下一个按钮，在某个点上只有一个按钮，最终导致显示 3 张相同的图片......而且它们没有滑动..
添加 easing.js 时，开始滑动。 Prev & Next 链接有效，但我想要.png 的。问题是，它滑动到一张图片，当它即将停止时，它切换到与应该显示的图片不同的图片？基本上，我有 4 张图片。如果显示 1 号，它会滑到 2 号图片，当它即将停止时，它会切换到 3 号图片（不滑动）。编辑：后一个问题是固定的，不知何故，它刚刚停止。现在我只想用 .css 文件中的 .pngs 替换 .js 中控制的现有“Prev”和“Next”。帮助？
添加 .hero-carousel-nav li.prev { left: 48px; right: auto; } 修复了它，它们现在已定位（不是我想要的，但我可以自己修复！），并且是可点击的。谢谢你，你应该得到世界上所有的感谢！

【解决方案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 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;
 }

【讨论】：

为什么你的实际上是可点击的，而我的却不是？我设法将我的 .png 文件放入其中，但它们不可点击。再次检查问题，在底部更新了新代码。没关系，我看到你有li.next a，我忘记了a。这使它们可以点击，但它们出现在相同的位置。现在更新问题。主要是因为，在我添加 .png 之前，“上一个”和“下一个”链接也会在同一个位置。我确实相信我可能在尝试摆脱它们时删除了 .css 中的一些代码，然后才意识到它们是在 .js 中控制的
现在唯一的问题是，在.png's 之外的一点点周围仍有一个区域可以点击，如果您想查看它，我更新了问题，否则我就这样留下.这只是一个学校项目！我不能投票，我的代表必须是 15 并且只有 6..
好的，没问题。抱歉，我刚刚看到您选择了答案。谢谢。
可以在此处看到示例，在右侧 (-->) 箭头上：imgur.com/4oKqe 如果这是一个简单的修复并且您不介意，否则我仍然非常感谢您！
查看更新的 css 代码实际上你的 li.next a 的宽度大于图像大小。所以我减少了它，请看看这是否适合你。