帶子彈的jQuery內容滑塊

我正在嘗試構建一個基本的jQuery自動內容滑塊，並帶有子彈，您可以點擊該滑塊去相應的幻燈片。我已經儘可能地構建滑塊，但不知道如何去實施子彈。帶子彈的jQuery內容滑塊

HTML

<section> 
     <div id="slideShow"> 

      <div class="slide"> 
       <div class="specialTitle"> 
        <h6 class="red">DRIVE TOWN</h6> 
        <h6 class="green">E&ndash;&#36;DEAL SPECIAL ONLY</h6> 
       </div> 
       <div class="homeSpecial"> 
        <h3>DRIVETOWN OFFER COMPREHENSIVE IN HOUSE FINANCE SERVICES</h3> 
        <a href="#" class="red">View full details</a> 
       </div> 
      </div> 

      <div class="slide"> 
       <div class="specialTitle"> 
        <h6 class="red">DRIVE TOWN</h6> 
        <h6 class="green">IN HOUSE FINANCE</h6> 
       </div> 
       <div class="homeSpecial"> 
        <h3>YOUR FIRST WOF FREE WITH ANY VEHICLE PURCHASED AT DRIVE TOWN IN SEPTEMBER</h3> 
        <a href="#" class="red">View full details</a> 
       </div> 
      </div> 

      <div class="slide"> 
       <div class="specialTitle"> 
        <h6 class="red">DRIVE TOWN</h6> 
        <h6 class="green">FREE LOAN CAR</h6> 
       </div> 
       <div class="homeSpecial"> 
        <h3>STAY ON THE ROAD WITH DRIVETOWNS FREE LOAN CAR</h3> 
        <a href="#" class="red">View full details</a> 
       </div> 
      </div> 

     </div> 
    </section>

CSS

#slideShow{ 
height:180px; 
width:630px; 
position:relative; 
margin:200px 0 0; 
background-color:red; 
} 

#slideShow .slide{ 
position:absolute; 
display:none; 
background-color:pink; 
} 

#slideShow .active{ 
display:block; 
} 

#slideShow .specialTitle{ 
float:left; 
width:195px; 
height:40px; 
margin:0; 
padding:10px 0 0 25px; 
background-color:rgba(0,0,0,0.8); 
}

JQUERY

jQuery(document).ready(function() { 
$("#slideShow .slide:first").addClass("active"); 
setInterval("slideShow()", 6000); 
}); 
function slideShow() { 
var $active = $("#slideShow .active"); 
var $next = ($("#slideShow .active").next().length > 0) ? $("#slideShow .active").next() : $("#slideShow div:first"); 
$next.fadeIn(1500,function(){ 
$next.addClass("active"); 
$active.fadeOut(1500).removeClass("active"); 
}); 
}

來源

2012-09-08 JVK

請插入這樣一來你的CSS代碼。

.orbit-bullets { 
left: 200px; 
top: -16px; 
}

// jQuery的

jQuery('#featured').orbit({ 
advanceSpeed: 6000, 
    bullets: true, 
directionalNav: false 
});

試試這個

來源

2012-09-08 05:56:39 Duk

嘿的評論Udhaya感謝，但我想，如果我使用的軌道插件只會工作，但我試圖建立自己的。 – JVK

帶子彈的jQuery內容滑塊

回答

相關問題