Fatal编程技术网

JQUERY图像滑块

jquery css html

JQUERY图像滑块,jquery,css,html,Jquery,Css,Html,嘿，我正在寻找一个简单的jquery图像滑块，当你点击每个图像时，它有一个简单的下拉列表，如果有人能帮助我，这将是一个救命稻草，因为我不是很好，仍然在学习html和jquery。到目前为止，我的代码是这样的 <html> <head> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <link rel="stylesheet"

嘿，我正在寻找一个简单的jquery图像滑块，当你点击每个图像时，它有一个简单的下拉列表，如果有人能帮助我，这将是一个救命稻草，因为我不是很好，仍然在学习html和jquery。到目前为止，我的代码是这样的

<html>
    <head>
        <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
        <link rel="stylesheet" type="text/css" href="eventspage.css" />
        <title>Events page</title>
        <style>
            img {
                float:left;
            }
            .container {
                width:60%;
                margin
            }
            #slider {
                width:400px;
                background-color:green;
                height:200px;
            }
            div {
                position:absolute;
            }
            .window {
                width:400px;
                height:400px;
                overflow:hidden;
                background-color: aqua;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    </head>
    <body>
        <div class="container">
            <button id="left">left</button> <button id="right">right</button>

            <div class="window">
                <div id="slider" class="block">
                    <img width="200px" src="person1.jpg">
                    <img width="200px" src="person2.jpg">
                </div>
            </div>
        </div>      

        <script>
            $("#right").click(function(){
                $(".block").animate({"left": "+=100px"}, "slow");
            });

            $("#left").click(function(){
                $(".block").animate({"left": "-=100px"}, "slow");
            });
        </script>
    </body>
</html>


事件页面
img{
浮动：左；
}
.集装箱{
宽度：60%；
边缘
}
#滑块{
宽度：400px；
背景颜色：绿色；
高度：200px；
}
div{
位置：绝对位置；
}
.窗户{
宽度：400px；
高度：400px；
溢出：隐藏；
背景色：浅绿色；
}
左右
$（“#右”）。单击（函数（）{
$（“.block”）.animate（{“left”：“+=100px”}，“slow”）；
});
$（“#左”）。单击（函数（）{
$（“.block”）.animate（{“left”：“-=100px”}，“slow”）；
});
是事实上的jQuery图像滑块插件，基本上可以完成所有功能

我不太清楚您所说的下拉列表是什么意思，但它可能很容易在循环的顶部实现。

对于您问题的下拉列表部分：

可以通过在映像上添加jquery事件处理程序来实现这一点

$("#slider img").click(function() {
  //CODE TO OPEN THE DROPDOWN
});