实现Hero Carousel滑块的问题

时间:2012-12-07 17:30:20

标签: javascript html css slider

我正在尝试实现的滑块/轮播:http://www.paulwelsh.info/jquery-plugins/hero-carousel/

我知道我必须为它添加HTML代码,由于没有设计网站的经验(一个月前开始我的课程),我无法这样做。你能帮我解决一下我应该添加的HTML代码吗?这是我的HTML,CSS&的JavaScript。 HTML是我认为应该看起来的样子,这显然是错误的。

HTML

<div class="what here?">         
<ul class="and what here?"> 
anything here?

<li><img src="images/deadmau5/slide1.jpg" ></li>

<li><img src="images/deadmau5/slide2.jpg" ></li>

<li><img src="images/deadmau5/slide3.jpg" ></li>

<li><img src="images/deadmau5/slide4.jpg" ></li>

</ul>

</div>

CSS

.hero {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}

.hero-carousel article {
    width: 980px;
    margin: 0 auto;
    height: 480px;
    display: block;
    float: left;
    position: relative;
    }

.hero-carousel-container article {
    float: left;
    }

    .hero-carousel article img{
        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;
            }

        .hero-carousel-nav li.prev {
            left: 48px;
            right: auto;
            }

        .hero-carousel-nav li a {
            background: #D21034;
            color: #fff;
            border: none;
            outline: none;
            display: block;
            float: left;
            padding: 5px 20px;

            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
            behavior: url(/assets/PIE.htc);
            }

        .hero-carousel-nav li a:hover { 
            background: #89051C;
            }

        .hero-carousel-nav li a:active,
        .hero-carousel-nav li a:focus { 
            border: none;
            outline: none;
            }

的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)}})};

2 个答案:

答案 0 :(得分:2)

从您提供的示例页面中嵌入这些资源:

<link rel="stylesheet" media="all" href="jquery.heroCarousel.css" type="text/css" />
<script type='text/javascript' src='jquery.heroCarousel-1.3.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

然后遵循此HTML结构:

        <div class="hero">
            <div class="hero-carousel">
                    <article><img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" >
                </article>
                    <article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" >
                </article>
                <article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" >
                </article>
                <article>
                    <img src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" > 
                </article>
</div>​

然后将此javascript代码添加到您网站的末尾:

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

DEMO:http://jsfiddle.net/dCYB7/1/http://fiddle.jshell.net/dCYB7/1/show/

编辑:

一个HTML + CSS + Javascript集合中的整个滑块:

<style>


#slider { width:100%; overflow:hidden; height:372px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-bg.png); margin-bottom:25px; }
#slider-container { height:352px; width:950px; margin:auto; padding-top:10px; position:relative; }
#slider-inner { width:10000px; height:352px; position:absolute; top:10px; left:-970px; }
.slide { width:938px; height:340px; border:6px solid #000; float:left; margin-right:20px; position:relative; }

#slider-arrow-left { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-left.png); position:absolute; left:-53px; top:120px; z-index:999; } #slider-arrow-left:hover { background-position:0 -124px; }
#slider-arrow-right { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-right.png); position:absolute; right:-53px; top:120px; z-index:999; } #slider-arrow-right:hover { background-position:0 -124px; }
#slider-fade-left { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png); position:absolute; left:-320px; top:0px; z-index:2; }
#slider-fade-left:hover { opacity:0.92; }
#slider-fade-right { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png); position:absolute; right:-320px; top:0px; z-index:2; }
#slider-fade-right:hover { opacity:0.92; }
#slider-black-left { height:372px; width:1000px; position:absolute; top:0px; left:-1300px; background-color:#0c100f; }
#slider-black-right { height:372px; width:1000px; position:absolute; top:0px; right:-1300px; background-color:#0c100f; }


</style>                           

            <div id="slider">
                <div id="slider-container">
                    <div id="slider-inner">
                        <div class="slide">
                            <a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a>                        </div>
                        <div class="slide">
                            <a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a>                        </div>
                        <div class="slide">
                            <a target="_blank" href="http://smarturl.it/albumtitlegoeshere"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" /></a>                        </div>
                        <div class="slide">
                            <a target="_blank" href="http://bzz.is/neffmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" /></a>                        </div>
                        <div class="slide">
                            <a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a>                        </div>
                        <div class="slide">
                            <a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a>                        </div>
                    </div>
                    <a href="#" id="slide-left"><span id="slider-arrow-left"></span></a>
                    <a href="#" id="slide-right"><span id="slider-arrow-right"></span></a>
                    <a href="#" id="slide-left-fade"><span id="slider-fade-left"></span></a>
                    <a href="#" id="slide-right-fade"><span id="slider-fade-right"></span></a>
                    <div id="slider-black-left"></div>
                    <div id="slider-black-right"></div>
                    <div id="hearts">
                        <a href="#" id="heart1"><span class="heart"></span></a>
                        <a href="#" id="heart2"><span class="heart"></span></a>
                        <a href="#" id="heart3"><span class="heart"></span></a>
                        <a href="#" id="heart4"><span class="heart"></span></a>
                    </div>
                </div>
            </div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>



<script type="text/javascript">


$(document).ready(function() {
    function slideLeft(evt) {
                    evt.preventDefault();
                    clearInterval(refreshId);

                    unbindAll();

                    var oldOrb = jQuery.data(document.body, 'activeOrb');

                    var newOrb = oldOrb - 1; if (newOrb < 1) { newOrb = 4; }
                    jQuery.data(document.body, 'activeOrb', newOrb);
                    orbChange(newOrb);

                    $('#slider-inner').animate({
                        left: '+=970'
                    }, 600, 'easeOutQuart', function() {
                        var me = $(this);
                        var p = me.position();
                        if (p.left > -10) { me.css('left', '-3880px'); } 
                        bindAll();
                    });
                }   

                function slideRight(evt) {
                    evt.preventDefault();
                    clearInterval(refreshId);

                    unbindAll();

                    var oldOrb = jQuery.data(document.body, 'activeOrb');
                    oldOrb = parseInt(oldOrb);

                    var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
                    jQuery.data(document.body, 'activeOrb', newOrb);
                    orbChange(newOrb);

                    $('#slider-inner').animate({
                        left: '-=970'
                    }, 600, 'easeOutQuart', function() {
                        var me = $(this);
                        var p = me.position();
                        if (p.left < -4840) { me.css('left', '-970px'); } 
                        bindAll();
                    });
                }   

                function slideRight2() {

                    var oldOrb = jQuery.data(document.body, 'activeOrb');

                    var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
                    jQuery.data(document.body, 'activeOrb', newOrb);
                    orbChange(newOrb);

                    $('#slider-inner').animate({
                        left: '-=970'
                    }, 600, 'easeOutQuart', function() {
                        var me = $(this);
                        var p = me.position();
                        if (p.left < -4840) { me.css('left', '-970px'); } 

                    });
                }   

                function slideTo(evt) {
                    evt.preventDefault();
                    clearInterval(refreshId);

                    unbindAll();

                    var oldOrb = jQuery.data(document.body, 'activeOrb');
                    var newOrb = $(this).attr('id'); newOrb = newOrb.substr(5,6);

                    jQuery.data(document.body, 'activeOrb', newOrb);
                    orbChange(newOrb);

                    var To;
                    if (newOrb == 1) { To = -970; } if (newOrb == 2) { To = -1940; } if (newOrb == 3) { To = -2910; } if (newOrb == 4) { To = -3880; }

                    $('#slider-inner').animate({
                        left: To
                    }, 600, 'easeOutQuart', function() {
                        bindAll();
                    });
                }   

                function orbChange(orb) {
                    $('.heart-active', '#hearts').removeClass('heart-active');
                    $('#heart' + orb + ' span').addClass('heart-active');
                }

                function bindAll() {
                    $('#slide-left').bind('click', slideLeft);  
                    $('#slide-right').bind('click', slideRight);
                    $('#slide-left-fade').bind('click', slideLeft); 
                    $('#slide-right-fade').bind('click', slideRight);
                    $('#hearts a').bind('click', slideTo);
                }

                function unbindAll() {
                    $('#slide-left').unbind('click', slideLeft);    
                    $('#slide-right').unbind('click', slideRight);
                    $('#slide-left-fade').unbind('click', slideLeft);   
                    $('#slide-right-fade').unbind('click', slideRight);
                    $('#hearts a').unbind('click', slideTo);
                }

                var refreshId = setInterval(function() {
                    slideRight2();
                }, 6000);
                bindAll();
        });




</script>

Live DEMO | CODE

答案 1 :(得分:0)

在.hero类中添加宽度和边距0自动

.hero {
position: relative;
overflow: hidden;
margin-bottom: 48px;
margin: 0 auto;
width: 960px;
}