英雄旋轉木馬問題

Question

滑塊/旋轉木馬我想implent是這樣的：http://www.paulwelsh.info/jquery-plugins/hero-carousel/

我知道，我必須添加HTML代碼吧，這我無法因與網站設計經驗少（啓動我的課程大約在一個月前）。你能幫我用我應該添加的HTML代碼來實現這個功能嗎？這是我的HTML，CSS & Javascript。 HTML是我認爲它應該看起來像，這顯然是錯誤的。

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

Answer 1

您必須更改加價ŧ ○：

<div class="hero"> 
    <div class="hero-carousel"> 
    <article> 
     <img src="slide-1.jpg" /> 
     <div class="contents">text goes here</div> 
    </article> 
    <article> 
     <img src="slide-1.jpg" /> 
     <div class="contents">text goes here</div> 
    </article> 
    </div> 
</div> 

不要忘記添加jQuery馬克，像：

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

這應該爲你工作。

編輯 - 嘗試使用inspect element或view source來幫助您解決類似問題。