javascript - slider 不是 "sliding"和上一个/下一个按钮问题

Question

我尝试实现的 slider /旋转木马是这样的:http://www.paulwelsh.info/jquery-plugins/hero-carousel/

这是我的 HTML、CSS 和 Javascript。

问题:

1. 图像不会自行滚动(现有的按钮也不起作用，只是一个显示“上一个和下一个”的链接，我什至不想要它。我想要自定义。 png 应该是可点击的..

2. 图像不是“滑动”的。

3. 如果您查看 .css 文件，您会请参阅 我尝试为下一个和上一个添加按钮，但失败了。 不确定要将什么作为 .hero-something-next thingy， 我看到了一段代码可以自己实现，但它在那一个中​​说 .slideshow-next，我知道我必须有一些不同的东西(按名称)，我只是不知道它应该说什么。

4. 在.js文件的开头还有一行一直放着幻灯片中的“上一页”和“下一页”链接，我不想要。我只是想箭头是切换图像的箭头。

5. 我不确定“缓动”部分是什么，也不确定“馅饼”部分是什么，也不确定为什么我的 CSS 中有它，如果它是均匀的必要的..(上了一个月的网页设计课，没有那么多经验，保持简单!)

目前的样子链接:imgur.com/e0lh9

fiddle 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;

}

Answer 1

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

首先添加了 jsfiddle 和 easyng lib(参见 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*/
}