用于图像和描述的jQuery滑块

Question

我正在尝试为我的投资组合网站创建一个滑块。

为了帮助表达我想要实现的目标，这里是我希望它看起来像的图像......

基本上当您点击下一个或上一个箭头时，屏幕截图和描述性文本都会单独滑动（如旋转木马效果），显示下一个屏幕截图和描述。我猜这是在jQuery中完成的，但是我已经查看了其他jQuery滑块并尝试了一次滑动整个过程。

有没有人知道如何实现我想要做的事情，或者知道有一个教程的网站？

非常感谢提前

汤姆

Answer 1

首先，标签jquery-ui-slider指的是一个滑块，它根据滑块上的手的位置改变值，jquery的完全不同的部分，

但无论如何，你需要一个滑块插件，允许你滑动内容div，here是一个例子

然后在div中你可以放置图像和描述，并使用css

看起来很漂亮 像这样可能

<div class="sliderWrap">
     <div class="sliderContent">
          <img src="..." />
          Content 1 goes here
     </div>

     <div class="sliderContent">
          <img src="..." />
          Content 2 goes here
     </div>  
</div>

Answer 2

这是一个非常高级别的问题，所以我只能给你一个类似的答案。这是我如何处理你的设计。步骤进行：

1）在UL中布置幻灯片和说明。每个IL包含相同的布局，但具有不同的图像和描述。

2）使用CSS设置UL样式，将所有LI元素显示为固定宽度的内联块。

3）将UL放入包装DIV中，溢出设置为隐藏

4）使用JQuery或简单的javascript只需增加或减少UL的相对位置，增量等于LI的固定宽度。 JQuery将帮助您更轻松地为动画制作动画（请参阅JQuery Animate（））。

您的基本结构如下：

<div id="slider">
    <ul>
        <li><img src="slide1.png">Slide 1 description text Slide 1 description text Slide 1 description text Slide 1 description text </li>
        <li><img src="slide2.png">Slide 2 description text Slide 2 description text Slide 2 description text Slide 2 description text </li>
        <li><img src="slide3.png">Slide 3 description text Slide 3 description text Slide 3 description text Slide 3 description text </li>
        <li><img src="slide4.png">Slide 4 description text Slide 4 description text Slide 4 description text Slide 4 description text </li>
        <li><img src="slide5.png">Slide 5 description text Slide 5 description text Slide 5 description text Slide 5 description text </li>
        <li><img src="slide6.png">Slide 6 description text Slide 6 description text Slide 6 description text Slide 6 description text </li>
    </ul>
</div>

<input type="button" id="slide_left" value="LEFT"> 
<input type="button" id="slide_right" value="RIGHT">

这是一个非常基本的骨架，但应该是一个好的开始。你的CSS可以完成其余的工作。

这是CSS：

#slider { width:600px; height:250px; background:url('slider_laptop_bg.png'); background-color:#eee; overflow:hidden; }
#slider ul { position:relative; left:0px; list-style-type:none; width:5000px; hieight:100%; padding:0; margin:0; }
#slider ul li { float:left; width:600px; height:250px; display:inline; padding:0px; margin:0; }
#slider ul li img { float:left; width:250px; height:200px; }

这是启用它的JQuery。查看Animate（）是否有更高级的东西。您还需要添加幻灯片检查的结尾和其他一些细节。

$(document).ready(function () {

    $('#slide_left').on('click', function () {
        $('#slider ul').css('left', $('#slider ul').position().left - 608);
    });

    $('#slide_right').on('click', function () {
        $('#slider ul').css('left', $('#slider ul').position().left + 608);
    });

});

希望这有帮助。

Answer 3

@tom每当我需要使用轮播时，我都会使用this。希望这会帮助你。最好的部分是，它是响应性的。