jQuery 图片和描述滑块

Question

我正在尝试为我的作品集网站创建一个滑动条。

为了表达我想要实现的效果，这里有一张图片展示... 基本上，当你点击下一个或上一个箭头时，屏幕截图和描述文本会分别滑动(就像旋转木马效果)，显示下一个屏幕截图和描述。我猜这是用jQuery实现的，但我已经查看并尝试了其他jQuery滑块，它们把整个东西一起滑动。

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

提前感谢！

汤姆

- Tom

---

只是为了澄清，当单击箭头时，您希望例如将笔记本电脑图像向左滑动，描述向右滑动，然后让下一个作品集项目的图像和描述滑入？ - Shawn Wernig

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>

- Scott Selby

---

谢谢Scott，我已经删除了错误的标签。我会尝试一下看看它是否有效。 - Tom

Answer 2

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

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

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

3）将UL放置在溢出设置为隐藏的包装器DIV中

4）使用JQuery或简单的javascript，仅通过等于LI固定宽度的增量来增加或减少UL的相对位置。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);
    });

});

希望这能有所帮助。

- Bryan Allo

---

我需要这样的东西来完成一个个人周末项目，所以我决定自己构建它。我在上面添加了我的初步代码。祝你好运。 - Bryan Allo

Answer 3

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

- V15HM4Y