如何使用jQueryUI选项卡制作简单的幻灯片？_Jquery_Jquery Ui_Slideshow

如何使用jQueryUI选项卡制作简单的幻灯片？

jquery jquery-ui

如何使用jQueryUI选项卡制作简单的幻灯片？,jquery,jquery-ui,slideshow,Jquery,Jquery Ui,Slideshow,我一直在尝试学习如何使用jQueryUI选项卡制作一个简单的幻灯片。到目前为止，我的谷歌搜索技能让我失望，而且我对JavaScript还是个新手。我已经知道如何使用示例教程制作jQueryUI选项卡。我只是想学习如何用它制作一个简单的幻灯片。如果这里有人能帮我做一个，请帮忙我希望幻灯片在页面加载时自动播放，并在鼠标悬停时停止。另外，如果可以添加滑动效果，请也添加一个。多谢各位下面是一些已经在JSFIDLE中设置的代码： $（函数（）{ $（“#tab”）.tabs（）； });

我一直在尝试学习如何使用jQueryUI选项卡制作一个简单的幻灯片。到目前为止，我的谷歌搜索技能让我失望，而且我对JavaScript还是个新手。我已经知道如何使用示例教程制作jQueryUI选项卡。我只是想学习如何用它制作一个简单的幻灯片。如果这里有人能帮我做一个，请帮忙

我希望幻灯片在页面加载时自动播放，并在鼠标悬停时停止。另外，如果可以添加滑动效果，请也添加一个。多谢各位

下面是一些已经在JSFIDLE中设置的代码：


$（函数（）{
$（“#tab”）.tabs（）；
});









幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5

CSS在JSFIDLE链接中

我想你要找的是旋转木马

包含几个基于jQuery的旋转木马项目，特别适合您的需要

探险家和其他项目也

检查这个插件<代码>http://www.jqwidgets.com/Support/jqxTabs/slideshow/slideshow.htm很棒的插件，但当你将鼠标移到它上面时，幻灯片不会停止。

<!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>