使用隐藏图像的基本图像滑块

时间:2012-09-10 16:48:10

标签: jquery html css

我正在尝试创建一个图像滑块,我基本上将图像水平排列(每个图像宽700px,高度不同),然后使用JQuery动画向右或向左滑动700px以显示下一个图像。我是jQuery的新手,我不确定我的下一步是什么以及我希望CSS能够做到这一点。

的jQuery

$("#slideRight").click(function() {
$("#slider").animate({right:700});
});

$("#slideLeft").click(function() {
$("#slider").animate({left:700});
});

HTML

<div id="slideButtons">
<input type="button" value="next L" id="slideLeft" />
<input type="button" value="next R" id="slideRight" />
</div>

<div id="slider">
<img src="slideTest.jpg" alt="" />
<img src="slideTest2.jpg" alt="" />
<img src="slideTest3.jpg" alt="" />
</div>

CSS

#slider {
height: auto;
width: 700px;
position: relative;
background-color: blue; 
}

1 个答案:

答案 0 :(得分:0)

如果你真的对构建图像滑块感兴趣,那么我很快就能建立起来。

注意: - 我使用了hide和show方法来实现滑块,有许多方法可以实现。请遵循逻辑而不是直接使用代码。

逻辑很简单

  1. 使用值设置为连续整数的ID生成图像
  2. 通过设置属性display none
  3. 使所有图像都隐藏
  4. 使第一个元素可见
  5. 然后当点击下一个按钮时,检查您是否在最后一个图像,如果是,则显示第一个图像,如果不显示下一个图像
  6. 找到下一张图片,您可以获取当前可见图片ID并将其加1以获取下一张连续图片
  7. 与之前类似,您可以减去显示上一张图像
  8. 显示上一张图像时,您必须检查是否正在查看第一张图像,如果是,则显示最后一张图像。否则通过按照步骤6
  9. 计算id来显示上一个图像

    这是我试图为这个问题构建的示例粗略代码(未经测试)

    // First make the first image visible 
    $(".slide-content img:first-child").show();
    
    // Bind the click handler 
    $("#slideRight").click(function() {
    
    // if there is only one image in the slider then return false 
    if($(".slide-content > img").length == 1)
    {
        return false;
    
    }
    
    // Set current to the visible element 
    var current = $(".slide-content > img:visible").attr('id');
    
    // hide the visible element 
    $('#'+current).hide();
    
    
    if(current == $(".slide-content > img").length ) 
    {
        current = 1;    
    }
    else
    {
        current = parseInt(current)+1;  
    }
    
    $('#'+current).show();
    
    
    });
    
    $("#slideLeft").click(function() {
    if($(".slide-content > img").length == 1)
    {
        return false;
    
    }
    
    var current = $(".slide-content  > img:visible").attr('id');
    $('#'+current).hide();
    if(current == 1) 
    {
        current = $(".slide-content > img").length; 
    }
    else
    {
        current = parseInt(current)-1;  
    }
    
    $('#'+current).show();
    
    
    });
    
    <div id="slideButtons">
    <input type="button" value="next L" id="slideLeft" />
    <input type="button" value="next R" id="slideRight" />
    </div>
    
    <div class="slide-content">
    <img id = '1' src="slideTest.jpg" alt="" />
    <img id = '2' src="slideTest2.jpg" alt="" />
    <img id = '3' src="slideTest3.jpg" alt="" />
    </div>