带子弹的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内容滑块

回答

相关问题