jquery - 用于图像和描述的 jQuery 滑块

Question

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

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

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

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

提前谢谢了

汤姆

Answer 1

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

Answer 2

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

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

然后在 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 3

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

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);
    });

});

希望这可以帮助。