jQuery滑块的图像和描述

我想为我的投资组合网站创建一个滑块。jQuery滑块的图像和描述

为了表达什么，我想实现的，这里是什么，我希望它看起来像一个图像... enter image description here

基本上当你到了一个或下一个箭头，无论是屏幕截图和描述性文字会单独滑动（如旋转木马效果），显示下一屏幕截图和说明。我猜这是在jQuery中完成的，但我查看过的其他jQuery滑块并试图一次滑动整个区域。

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

许多在此先感谢

汤姆

所有标签的jQuery UI的滑块的

来源

2012-10-05 Tom

只是为了说明，单击箭头时，例如，您需要将膝上型计算机图像向左滑动，并将描述向右滑动，然后将下一个投资组合项目的图像和说明滑入？ –

首先是指基于其中滑块上的手是完全不同的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>

来源

2012-10-05 16:26:55

谢谢斯科特，我删除了不正确的标签。我会给这个去看看它是否有效。 – Tom

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

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

});

希望这会有所帮助。

来源

2012-10-05 16:34:09

谢谢布赖恩生病让这一去！ – Tom

我需要这样的个人周末项目，并且我想我只是把它建造出来。我在上面添加了我的粗略代码。祝你好运。 –

非常感谢Bryan – Tom

@tom无论何时需要使用旋转木马，我都使用this。希望这会帮助你。其中最好的部分是它的响应速度。

来源

2013-04-16 09:33:48 V15HM4Y

jQuery滑块的图像和描述

回答

相关问题