Question

我正在尝试为我的网站创建幻灯片切换。我从其他来源复制了代码，但它似乎不起作用。我有src jquery ui和jquery。但它没有用。有什么建议吗？

以下是我的代码：

$(document).ready(function(e) {
    var contactHidden = false;
    $(".contactHider").click(function(){
        var effect = 'slide';
        var opt = { direction: 'right' };
        var duration = 700;
        $('.contactDiv').toggle(effect, opt, duration);
    });
});

CSS：

.contactDiv { 
height: 100%;
width: 300px;
background-color: #414040;
float:right;
right:0;
position:absolute;
z-index:1000;
}

.contactHider{
    height:100%;
    background:#999;
    cursor:pointer;
    width:20px;
    font-weight:700;
    font-family:OpenSansBold;
    float:right;
    margin-right:300px;
    z-index:1335;
    position:absolute;
    right:0;
}

我的代码有什么问题吗？

Answer 1

如果您想按班级切换，请使用以下代码并根据您的要求进行调整。将区域放在要切换的div下面。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

$(function() {
   $( "#DivID" ).click(function() {
  $( "#effect" ).toggleClass( ".className", 1000 );
  });

}）;

Answer 2

如果在<script type="text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>之前为jquery文件创建链接，则在head标记内。然后你的文件可能会在jquery之前处理。所以在<script type="text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>之后保留文件的链接。另一个常见错误是关闭</script>标记。如果链接未关闭，则某些浏览器将休息部分包含在<script>标记内。代码$(document).ready(function() { //if you want you can use [$('.contactDiv').slideToggle("fast");] but don't hide it in any other way. $(".contactHider").click(function(){ $('.contactDiv').slideToggle("slow"); }); });

Jquery幻灯片切换不起作用

2 个答案: