Javascript 我想在向下滑动的div中放置一个滑块_Javascript_Html

Javascript 我想在向下滑动的div中放置一个滑块

javascript html

Javascript 我想在向下滑动的div中放置一个滑块,javascript,html,Javascript,Html,我想把这个滑块放在slideDown（）函数中，这样当文本悬停时，滑块就会下降我已经给出了我试图处理的代码片段，它包括javascript、css和正文 <script> var $ = function (id) { return document.getElementById(id); } var swapImage = function (){ if($("image1").title=="image1") { $("image1"

我想把这个滑块放在slideDown（）函数中，这样当文本悬停时，滑块就会下降

我已经给出了我试图处理的代码片段，它包括javascript、css和正文

    <script> 

    var $ = function (id) {
    return document.getElementById(id); 
}


var swapImage = function (){

if($("image1").title=="image1")
{
    $("image1").src="/static/img/new_desserts/two.jpg";
    $("image1").title="image2";
}
else if($("image1").title=="image2")
    {
        $("image1").src="/static/img/new_desserts/teen.jpg";
        $("image1").title="image3";
    } 
else if($("image1").title=="image3")
    {
        $("image1").src="/static/img/new_desserts/some.jpg";
        $("image1").title="image4";
    }
else if($("image1").title=="image4")
    {
        $("image1").src="/static/img/new_desserts/set.jpg";
        $("image1").title="image5";
    }
else if($("image1").title=="image5")
    {
        $("image1").src="/static/img/new_desserts/cake.jpg";
        $("image1").title="image1";
    }
    setTimeout(swapImage, 5000);
}

window.onload = function () {
   /*  $("calculate=").onclick = function(){calculate();} */

   swapImage();
}

$(document).ready(function(){

          $("#prj_1").mouseover(function(){
            $("#image").stop().slideDown("slow");
    });


});
</script>

<style>
            #prj_1{
                position:absolute;
                top:1%;
                left:50%;
                width:1230px;
                height:200px;
                font-family:Andalus;
                font-size:20px;
                color:gold; 
            }
            #image{
                position:absolute;
                top:3%;
                left:25%;
                width:700px;
                height:300px;
                display:none;   
                background-color:red;
            }
</style>

<body>
        <div id="prj_1">AAA Laundry</div>

         <div id="image">
                <img id="image1" src="/static/img/new_desserts/glass.jpg" title="image1" />
        </div>


    </div>

</body>


var$=函数（id）{
返回文档.getElementById（id）；
}
var swapImage=函数（）{
如果（$（“图像1”）。标题==“图像1”）
{
$（“image1”）.src=“/static/img/new_deserts/two.jpg”；
$（“image1”）.title=“image2”；
}
else if（$（“image1”）。title==“image2”）
{
$（“image1”）.src=“/static/img/new_deserts/teen.jpg”；
$（“image1”）.title=“image3”；
} 
else if（$（“image1”）。title==“image3”）
{
$（“image1”）.src=“/static/img/new_deserts/some.jpg”；
$（“image1”）.title=“image4”；
}
else if（$（“image1”）。title==“image4”）
{
$（“image1”）.src=“/static/img/new_deserts/set.jpg”；
$（“image1”）.title=“image5”；
}
else if（$（“image1”）。title==“image5”）
{
$（“image1”）.src=“/static/img/new_deserts/cake.jpg”；
$（“image1”）.title=“image1”；
}
设置超时（swapImage，5000）；
}
window.onload=函数（）{
/*$（“calculate=”）.onclick=function（）{calculate（）；}*/
swapImage（）；
}
$（文档）.ready（函数（）{
$（“#prj_1”）.mouseover（函数（）{
$（“#image”）.stop（）.slideDown（“slow”）；
});
});
#prj_1{
位置：绝对位置；
最高：1%；
左：50%；
宽度：1230px；
高度：200px；
字体系列：Andalus；
字体大小：20px；
颜色：金色；
}
#形象{
位置：绝对位置；
最高：3%；
左：25%；
宽度：700px；
高度：300px；
显示：无；
背景色：红色；
}
AAA洗衣店

如果我删除了slideDown的代码，它将正常工作，否则它将无法工作。

请帮助。

我对您的代码做了一些修改，并使用JQuery而不是Javascript，您还使用了

window.onload

和

$（document.ready

，它们的用途几乎相同

请检查此演示，看看这是否是您想要的：-

非常感谢u-soo，这正是我想要的。