Question

<html>
<head>
var ar = new Array();

ar[0] = "box1";
ar[1] = "box1";
ar[2] = "box1";
ar[3] = "box1";
ar[4] = "box1";

var idx = -1;
var tm;

$(document).ready(function() {

tm = setInterval("moveImage()", 5000);

$(".sliderlinks li").click(function() {
    idx = parseInt($(this).attr("class"));
    changeDiv();

    clearInterval(tm);

    tm = setInterval("moveImage()", 5000);
})

$(".sliderlinks li").first().addClass("selectedpanel");

});

function moveDiv() {
++idx;

if (idx == ar.length)
    idx = 0;

changeDiv();
}

function changeDiv() {
var imgname = ar[idx];
// $(".sliderpanel").css('background-image', "url(images/" + imgname + ")");

var image = $('#sliderimage');

$(".box1").css('display','block');

image.fadeOut(500, function() {
    //image.attr("src", "images/" + imgname);
    image.fadeIn(500);
});

$(".sliderlinks li").removeClass("selectedpanel");
$("li." + idx).addClass("selectedpanel");
}
</head>
<body>
     <div class="sliderpanel">
<div id="sliderimage"/>
    <div class="box1" rel="1">box1</div>
    <div class="box2" rel="2">box2</div>
    <div class="box3" rel="3">box3</div>
    <div class="box4" rel="4">box4</div>
    <div class="box5" rel="5">box5</div>
</div>
<ul class="sliderlinks">
    <li class="0">
        <h3>Gynecological Care</h3>
        <p>Annual Exams, Birth Control-Essure, Mirena</p>
    </li>
    <li class="1">
        <h3>Obstetrical Care</h3>
        <p>Pre-Natal, VBAC, High Risk</p>       
    </li>
    <li class="2">
        <h3>Well Woman Exams</h3>
        <p>In Office Gyn Procedures</p>
    </li>
    <li class="3">
        <h3>Infertility</h3>
        <p>Diagnosis &amp; Treatment</p>
    </li>
    <li class="4">
        <h3>Urogynecology</h3>
        <p>Incontinence and Prolapse Treatment</p>
        </li>
</ul>
</div>
</body>
</html>

我想制作jquery box滑块它之前是一个图像滑块，我编辑它代替图像我希望我的自定义div在这里播放..

所以这是我的代码我试图制作一个jquery自动div滑块，并点击ui li标签，但我被困在jquery我不知道如何播放我的框我定义了box1 box2 box3 box4和box5。

我正在编辑图像滑块代码，并希望将我的div框放在图像的位置

0 个答案: