Question

我正在尝试构建一个带有项目符号的基本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");
});
}

Answer 1

请将此信息插入您的css代码。

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

// Jquery的

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

试试这个

带子弹的jQuery内容滑块

1 个答案: