如何使用jquery-ui标签制作简单的幻灯片显示？

Question

I've been trying to learn how to make a simple slideshow using the jquery-ui tab. 我一直在尝试学习如何使用jquery-ui选项卡进行简单的幻灯片演示。 So far, my Google searching skills have failed me and I'm still very new at JavaScript. 到目前为止，我的Google搜索技能使我失败了，并且我对JavaScript仍然很陌生。 I already know how to make a jquery-ui tab using examples tutorials. 我已经知道如何使用示例教程来制作jquery-ui选项卡。 I just want to learn how to make a simple slideshow out of it. 我只想学习如何制作一个简单的幻灯片。 If anyone here can help make one for me, please help. 如果这里有人可以帮我做一个，请帮助。

I want the slideshow to automatically play when the page load and stop whenever the mouse is hovering over it. 我希望幻灯片在页面加载时自动播放并在鼠标悬停在页面上方时停止播放。 Also, if a sliding effect can be added, please add one also. 另外，如果可以添加滑动效果，请也添加一个。 Thank you very much. 非常感谢你。

Here's some code already set up in JSfiddle: 这是JSfiddle中已经设置的一些代码：
http://jsfiddle.net/TcNJ2/ http://jsfiddle.net/TcNJ2/

<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

 <script>
$(function() {
$( "#tab" ).tabs();
});
</script>

</head>

<body>

<div id="tab">

<ul id="btn">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
</ul>

<br class="clear">

<div id="slides">
    <div id="1">Slide 1</div>
    <div id="2">Slide 2</div>
    <div id="3">Slide 3</div>
    <div id="4">Slide 4</div>
    <div id="5">Slide 5</div>
</div>

</div>

</body>

The CSS is in the jsfiddle link CSS在jsfiddle链接中

Answer 1

I think what you are looking for is Carousel. 我认为您正在寻找的是Carousel。

This page contains several jQuery based carousel projects, in particular this may fit your need. 此页面包含几个基于jQuery的轮播项目，尤其是这可能适合您的需求。

Explorer with the other projects too!!! 资源管理器也与其他项目一样！！！

如何使用jquery-ui标签制作简单的幻灯片显示？

问题描述

1 个解决方案

解决方案1
0 2013-08-07 05:36:50

如何使用jquery-ui标签制作简单的幻灯片显示？

问题描述

1 个解决方案

解决方案1 0 2013-08-07 05:36:50

解决方案1
0 2013-08-07 05:36:50