Question

我想用javascript制作幻灯片，但我只知道如何用里面的几张图片做到这一点，但对于我的网页，我需要做幻灯片，我可以把div放到哪里？

我只需要两张幻灯片，每张幻灯片都有3个div，左边两张幻灯片会改变。

HTML

<div id="container" class="cont2">

        <div id="box1" class="box">Div #1<div class="kkc"><p>Div Caption1</p></div></div>
        <div id="box2" class="box">Div #2<div class="kkc"><p>Div Caption2</p></div></div>
        <div id="box3" class="box">Div #3<div class="kkc"><p>Div Caption3</p></div></div>

CSS

#container {
position: absolute;
margin: 0px;
padding: 0px;
height: 304px;
width: 500px;
overflow: hidden; 
background-color:  white;
margin-top: 78px;
margin-left: 124px;
z-index: -1;
}

.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;   
top: 0px;
margin-left: -25%;
z-index: -1;
cursor: pointer;
}

 #box1 {
background-color: green;
left: -150%;

}


#box2 {
background-color: yellow;
left:50%;
 }

 #box3 {
background-color: red;
left: 150%;


}

的Javascript

$(document).ready(function(){
var refreshId;
var restartAnimation = function() {
    clearInterval(refreshId);
    refreshId = setInterval( function() 
    {    
        $('.box').each(function() {
            if ($(this).offset().left < 0) {
                $(this).css("left", "150%");
            } else if ($(this).offset().left > $('#container').width()) {
                $(this).animate({
                    left: '50%'
                }, 500 );
            } else {
                $(this).animate({
                    left: '-150%'
                }, 500 );
            }
        });
    },1000);
}

restartAnimation()


});

我试过这个但是没有用。

Answer 1

<强> JS：

function Divs() {
    var divs= $('#parent div'),
        now = divs.filter(':visible'),
        next = now.next().length ? now.next() : divs.first(),
        speed = 1000;

    now.fadeOut(speed);
    next.fadeIn(speed);
}

$(function () {
    setInterval(Divs, 1400);
});

<强> CSS：

#parent div {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
}
#parent div:first-child {
    display:block;
}
div{background:red}

#parent > div{
    width:400px;
    height:250px;
}

<强> HTML：

<div id="parent">

        <div id="box1" class="box">Div #1</div>
        <div id="box2" class="box">Div #2</div>
        <div id="box3" class="box">Div #3</div>
</div>

here is a Js Fiddle example

如何制作里面有div的幻灯片，而不是图片？

1 个答案: