Question

请尝试创建带有背景图像和随图像变化的气泡的图像幻灯片放映，这一直有效，直到我添加了mouseover和mouseout eventListeners。在鼠标悬停时，幻灯片停止并在mouseout上开始。

这里的问题是，在调用mouseout事件之后，图像似乎是随机显示而不是顺序显示。也就是说，如果气泡1处于活动状态，而不是显示图像1，它可能会选择图像4或5.请任何人帮助我。感谢。

这是我的代码：

<html>
<head>
    <title>Bubble 4</title>

<style type="text/css">

#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
    height: 0px;
    width: auto;
    text-align: center;
    z-index: 100;
    position: absolute;

}
#bubbles div{
    height: 20px;
    width: 20px;
    background: rgba(0,0,0,.1);
    border: 2px solid green;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    margin: 0px auto;
    top: 10px;
    z-index: 1000;
    left: 310px;
    color:#fff;
    cursor: pointer;
}
#heading{
    height: 20px;
    width: 200px;
    background-color: red;
    position: relative;
    top: 100px;
    left: 500px
}
#arrow_right, #arrow_left, #arrow_middle{
    width: 20px;
    height: 20px;
    transition: .5s;
    float: left;
    box-shadow: -4px 4px 0 rgb(255, 255, 255);
    cursor: pointer;
    left: 1100px;
    position: relative;
    margin: 0 -10px 0 0px;
    top: 200px;
    border-bottom: 3px solid black;
    border-left: 3px solid black;
    transform: rotate(225deg);
}

#arrow_right2, #arrow_left2, #arrow_middle2{
    width: 20px;
    height: 20px;
    transition: .5s;
    float: left;
    box-shadow: -4px 4px 0 rgb(255, 255, 255);
    cursor: pointer;
    left: 10px;
    position: relative;
    margin: 0 -10px 0 0px;
    top: 200px;
    border-bottom: 3px solid black;
    border-left: 3px solid black;
    transform: rotate(45deg);
}

#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
</style>


</head>
<body>

<script type="text/javascript">

var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;


var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];


function _(x){
    return document.getElementById(x);
}

function bubbleMain(bi){
    bubble_i++;
    if(bubble_i == man.length){
        bubble_i = 0;
    }
    _('bubblebox').style.opacity = 0;
    for (var i =0; i < ba.length; i ++){
        ba[i].style.background = "rgba(0,0,0,.1)";
    }

    setTimeout(function(){
        _('bubblebox').style.backgroundImage = man[bubble_i];
        ba[bi].style.background = "red";
        _("bubblebox").style.opacity = 1;
    }, 500);
}
function bubbleSlide(){

    ba = _('bubbles').children;
    _('bubblebox').style.backgroundImage = man[bubble_i];
    ba[bi].style.backgroundColor = 'red';


    bi++;
    if (bi == ba.length){
        bi =0;
    }
bubbleMain(bi);
}

window.addEventListener("load", function(){
    ba = _('bubbles').children;
    _('bubblebox').style.backgroundImage = man[bubble_i];
    ba[bi].style.backgroundColor = 'red';
    intrval = setInterval(bubbleSlide, 2000);
    })
//This is where i added mouseover
window.addEventListener("mouseover", function(){
    clearInterval(intrval);
})
//I am suspecting this line od codes.
window.addEventListener("mouseout", function(){
    intrval = setInterval(bubbleSlide, 2000);
})


</script>




<div id="bubblebox">
    <div id="bubbles">
        <div onclick="bubbleMain(0)">1</div> 
        <div onclick="bubbleMain(1)">2</div> 
        <div onclick="bubbleMain(2)">3</div> 
        <div onclick="bubbleMain(3)">4</div> 
        <div onclick="bubbleMain(4)">5</div> 
        <div onclick="bubbleMain(5)">6</div> 
        <div onclick="bubbleMain(6)">7</div> 
        <div onclick="bubbleMain(7)">8</div> 
        <div onclick="bubbleMain(8)">9</div> 
        <div onclick="bubbleMain(9)">10</div> 
        <div onclick="bubbleMain(10)">11</div> 
        <div onclick="bubbleMain(11)">12</div>
        <div onclick="bubbleMain(12)">13</div> 
        <div onclick="bubbleMain(13)">14</div> 
        <div onclick="bubbleMain(14)">15</div> 
        <div onclick="bubbleMain(15)">16</div> 
        <div onclick="bubbleMain(16)">17</div> 
        <div onclick="bubbleMain(17)">18</div> 
        <div onclick="bubbleMain(18)">19</div> 
        <div onclick="bubbleMain(19)">20</div>
    </div>
    <div id="heading"></div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>

<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>
</body>
</html>

Javascript backgroundImage幻灯片与泡沫

0 个答案: