图像滑块按钮没有触发

我正在处理图像滑块，您可以通过prev和next按钮浏览它们。其实这是一个非常简单的滑块，但我只是从jQuery开始。这里是我的脚本：图像滑块按钮没有触发

$(document).ready(function() { 
    var $active = $('.active'); 
    var $next = $active.next(); 
    var $prev = $active.prev(); 

    $('.next').click(function() { 
     $next.addClass('active'); 
     $active.removeClass('active'); 
    }) 

    $('.prev').click(function() { 
     $prev.addClass('active'); 
     $active.removeClass('active'); 
    }) 
});

//编辑

这里的HTML：

<div id="imgslider"> 
     <img src="" class="active"/> 
     <img src=""/> 
     <img src=""/> 
     <div class="slidercontrols"> 
      <div class="prev">&lsaquo;</div> 
      <div class="next">&rsaquo;</div> 
     </div> 
    </div>

CSS：

.active{ 
    z-index: 4; 
} 

    .prev, .next 
{ 
    position: absolute; 
    height: 80px; 
    line-height: 55px; 
    width: 50px; 
    font-size: 100px; 
    text-align: center; 
    color: #fff; 
    top: 50%; 
    left: 0; 
    z-index: 5; 
    margin-top: -25px; 
    cursor: pointer; 
    opacity: .7; 
    transition: all 150ms; 
}

脚本不工作。我的意思是，当我点击其中任何一个按钮时，他们什么都不做，我不知道问题是脚本还是html-css文件。

来源

2014-02-11 Alejandro Guayara

怎么做你想让他们做什么？你只是添加/删除类。 – witherwind

可以请你发布你的滑块内容..我的意思是你的图像和箭头图像代码在你的HTML页面？那么只有我们可以检查.. –

显示您的HTML。 –

您必须对滑块内的所有图像使用公共类名称。在添加类active之前，您必须删除该滑块中的所有active类。然后你必须为当前滑块添加活动类。

HTML：

<img src="image/1.jpg" class="imageClass" /> 
<img src="image/2.jpg" class="imageClass active" /> 
<img src="image/3.jpg" class="imageClass" />

JS：

$(document).ready(function() { 
    var $active = $('.active'); 
    var $next = $active.next(); 
    var $prev = $active.prev(); 

    $('.next').click(function() { 
     //imageClass represents class name used for all images 
     $('.imageClass').removeClass('active'); 
     $next.addClass('active'); 
    }); 

    $('.prev').click(function() { 
     //imageClass represents class name used for all images 
     $('.imageClass').removeClass('active'); 
     $prev.addClass('active'); 
    }); 
});

来源

2014-02-11 05:25:54

图像滑块按钮没有触发

回答

相关问题