Question

这将是我第一次创建其中一个滑块。我见过很多，虽然它们非常酷，我正在寻找一些非常基本的东西。正如您在下图所示，我右侧有4个矩形图像，当单击其中任何一个时，左侧会显示一些与刚刚单击的图像对应的文本。

我不确定是否需要jQuery来执行此操作？我认为它比Javascript更容易......

任何人都可以指出我正确的方向或提供一些关于如何创建这样的滑块的建议吗？

谢谢

Sample jQuery Slider Image

Answer 1

很多人使用的是一个名为jquery kwicks的脚本。这是一个简单的图像手风琴链接，可以帮助您入门：

http://www.aoclarkejr.com/tutorial-jquery-accordion-slider.html

以下是kwicks网站的链接：

http://www.jeremymartin.name/projects.php?project=kwicks

Answer 2

这是一个很好的教程，可以创建图像中的内容。它使用jquery，但在制作这样的东西时，jquery不是必需的。

http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/

Answer 3

要实现一个简单但功能强大的图像滑块，下面是我成功执行的代码。下面是使用JavaScript创建简单图像滑块的代码。

您可以通过创建Image（）对象的实例来附加所需的图像。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Slider</title>
<script type="text/javascript">
var image1 = new Image();
image1.src = "AshuBridgeBW.jpg";

var image2 = new Image();
image2.src = "Ashu.jpg";

var image3 = new Image();
image3.src = "A&S.jpg";
</script>
</head>

<body>
<img src="club.png" name="slide" width="300" height="300" border="10" />
<script>
var step=1;
function slideit(){
    document.images.slide.src=eval("image"+step+".src");
    if(step<3){
        step++;}
    else{
        step=1;}
    setTimeout("slideit()",1000);
}
slideit();
</script>
</body>
</html>

简单的jQuery Slider？

3 个答案: