0

クリックして対応するスライドに移動できる箇条書きの基本的な 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);
}

Jクエリ

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");
});
}
4

1 に答える 1

1

これを CSS コードに挿入してください。

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

//Jクエリ

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

これを試して

于 2012-09-08T05:56:39.473 に答える